react渲染的过程

通过babel编译

4.父组件render(通过props)

组件初始化触发的生命周期：constructor()render() componentDidMount(){//组件已经被渲染到 DOM 中后运行}componentWillUnmount(){//组件将要卸载}

2.this.setState()变化（通过自己的state）

state 赋初值在类组件中添加构造函数 constructorclass Clock extends React.Component { constructor(props) {    super(props);    this.state = {date: new Date()};  }  render() {    return <p>当前时间：{ this.state.data.toLocalTimeString()}</p>;  }}

生命周期

函数式组件function Welcome(props) {  return <h1>{props.name}</h1>;} 

state只有类组件有且是私有完全受控当前组件

创建简化对象

是组件就会将jsx接收的props对象传给组件

类组件   //props变成了this.propsclass Welcome extends React.Component {  render() {    return <h1>{this.props.name}</h1>;  }}

//表示对象的react元素，jsx代码）const element = (  <h1 className=\"greeting\

生命周期的变化

3.this.forceUpdate()

Concurrent模式:ReactDOM.createRoot(rootNode).render(<App/>)

1.初始化

//JSX使用特定属性const element = <img src={img.url} />

batchedUpdates 批处理，在react中将多次this.setState合并为一次更新

Blocking模式:ReacatDOM.createBlockingRoot(rootNode).render(<App/>)

// 基本表达式  const element = <h1>Hello World!</h1>