简单介绍
本文档示例代码使用语言为typescript
简介
react是Facebook的一个开源JavaScript类库。核心技术和概念为jsx，组件，v-dom，data flow。
jsx
react的模板代码，直接嵌入js代码中，文件后缀为.jsx或者.tsx
组件
state和props是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)，用以在不同的时刻触发状态的更新。这种组件也是通常在写业务逻辑中最经常使用到的，根据不同的业务场景组件的状态数量以及生命周期机制也不尽相同
