React简单介绍

简单介绍

本文档示例代码使用语言为typescript

简介

react是Facebook的一个开源JavaScript类库。核心技术和概念为jsx,组件,v-dom,data flow。

jsx

react的模板代码,直接嵌入js代码中,文件后缀为.jsx或者.tsx

组件

stateprops是react组件的两个核心概念

props

// 示例代码
import React, { Component } from 'react';
import { render } from 'react-dom';

const Helloworld = (props) => {
    return <div>{props.str}</div>;
}

// 加载组件到 DOM 
render(<Helloworld str='Hello world!' />, document);

props是在调用组件的时候传入不同的属性,组件内部无法改变自身的props,可以把props看作组件的配置属性。

state

state是组件的当前状态,可以把组件看作一个状态机,根据状态呈现不同的UI展示。一旦状态变更,组件就会自动调用render重新渲染UI,这个更改的动作会通过this.setState方法来触发。其他方式变更state是无法重新渲染的

v-dom

全称Virtual DOM,react实现的虚拟dom。组件dom结构映射在v-dom上,react在v-dom上实现了一个diff算法,当需要重新渲染组件的时候,会通过diff算法去寻找需要变更的组件,再把这个改动更新到浏览器的真实dom上。v-dom是一个纯粹的js数据结构,性能回避原生dom快很多

data flow

单向数据流是react推崇的一种应用架构方式,指只能从一个方向来修改状态,props的变更方式很好的解释了单向数据流

JSX语法

jsx全称为JavaScript XML,是ECMAScript的类似XML的语法扩展。jsx为react开发的一套语法糖,也是react的基础

// 示例代码
const helloworld = <div>Hello world!</div>; // 声明常量无状态组件,纯组件
const helloworldFunc = () => { // 声明无状态组件
    const str = 'Hello world!';
    return <div>{str}</div>;
}
interface Props{
    props1:string
}
interface State{
    state1:string
}
class DemoComponent extends React.Component<Props,State>{// class有状态组件
    render(){
        return <div>Hello world!</div>
    }
}

组件

react在es6中的组件在写法上分为class组件和function组件,在状态上分为有状态组件和无状态组件。

写法区分

class组件

// 示例代码
interface Props{
    props1:string
}
interface State{
    state1:string
}
class DemoComponent extends React.Component<Props,State>{
    render(){
        return <div>Hello world!</div>
    }
}

class组件包含state和完整的react组件生命周期,其中渲染函数为render()

function组件

// 示例代码
interface Props{
    props1:string
}
const helloworldFunc = (props:Props) => {
    const str = 'Hello world!';
    return <div>{str}</div>;
}

function组件中,返回值即为渲染组件,在react16.7版本之前,function组件只能作为无状态组件使用

在react16.7版本中,react引入了react hooks,function组件也可以作为有状态组件来使用了

// react hooks代码示例
import React,{useState} from 'react';
interface Props{
    props1:string
}
const hooksDemo = (props:Props) => {
    const [str,setStr] = useState('hello world!');
    // str即为state.str,setStr即为setState({str}),‘hello world!’为str的初始值
    return <div>{str}</div>;
}

状态区分

无状态组件

无状态组件(Stateless Component)是最基础的组件形式,由于没有状态的影响所以就是纯静态展示的作用。一般来说,各种UI库里也是最开始会开发的组件类别。如按钮、标签、输入框等。它的基本组成结构就是属性(props)加上一个渲染函数(render)。由于不涉及到状态的更新,所以这种组件的复用性也最强

有状态组件

在无状态组件的基础上,如果组件内部包含状态(state)且状态随着事件或者外部的消息而发生改变的时候,这就构成了有状态组件(Stateful Component)。有状态组件通常会带有生命周期(lifecycle),用以在不同的时刻触发状态的更新。这种组件也是通常在写业务逻辑中最经常使用到的,根据不同的业务场景组件的状态数量以及生命周期机制也不尽相同

推荐阅读更多精彩内容

  • HTML模版 之后出现的React代码嵌套入模版中。 1. Hello world 这段代码将一个一级标题插入到指...
    ryanho84阅读 2,801评论 0 9
  • 1、什么是react React.js 是一个帮助你构建页面 UI 的库。React.js 将帮助我们将界面分成了...
    谷子多阅读 616评论 0 10
  • 以下内容是我在学习和研究React时,对React的特性、重点和注意事项的提取、精练和总结,可以做为React特性...
    科研者阅读 5,124评论 2 21
  • 作为一个合格的开发者,不要只满足于编写了可以运行的代码。而要了解代码背后的工作原理;不要只满足于自己的程序...
    六个周阅读 2,236评论 0 22
  • 40、React 什么是React?React 是一个用于构建用户界面的框架(采用的是MVC模式):集中处理VIE...
    萌妹撒阅读 117评论 0 1