本文已参与「新人创作礼」活动，一起开启掘金创作之路。

React原理揭秘

1.setState()说明

• setState()是异步更新数据的

• 可以使用setState((state, props)=>{})语法

  /*
  参数state: 表示最新的state
  参数props: 表示最新的props
  */
  
  this.setState((state,props)=>{
      return{
          count: state.count + 1
      }
  })
  
  this.setState((state,props)=>{
          return{
              count: state.count + 1
          }
      },()=>{
      	// state修改完成后的回调函数
  	}
  )
  

2.JSX语法的转化过程

• JSX仅仅是createElement()方法的语法糖

• JSX语法被@babel/preset-react编译成createElement()

  graph LR
  A(JSX语法)-->B(createElement)-->C(React元素)
  

3.组件更新机制

• 过程：父组件重新渲染时，也会重新渲染子组件。但只会渲染当前组件子树（当前组件及其子组件）

4.组件性能优化

• 减轻state：只存储跟组件渲染相关数据

• 避免不必要的重新渲染

  当父组件更新时，其子组件都会更新（尽管子组件不存在变化)

  解决方式：使用钩子函数shouldComponentUpdate(nextProps, nextState)

  触发时机：更新阶段的钩子函数，组件重新渲染前执行（shouldComponentUpdate->render）

  class Hello extends React.Component{
      shouldComponentUpdate(nextProps, nextState){
          // 根据条件，决定是否渲染组件
          return false/true
      }
      
      render(){
          ...
      }
  }
  

5.纯组件

• 纯组件内部的对比是shallow compare（浅层对比）

6.虚拟DOM和Diff算法

• React 更新视图的思想是：只要state变化就渲染视图
• 虚拟DOM：本质是JS对象，用来描述UI
• 执行过程：
  1. 初次渲染时，React会根据初始state（Model），创建一个虚拟DOM对象（树）
  2. 根据虚拟DOM生成真正的DOM，渲染页面
  3. 当数据变化后（setState（）），根据新的数据，创建新的虚拟DOM对象
  4. 与旧的DOM对象进行比较（使用Diff算法），得到需要更新的内容
  5. 最终，React直将变化的内容更新（patch）到DOM中，重新渲染页面

总结：
    组件的出现大大降低了编码的冗余度，避免了旧式页面不断重复编程带来的时间消耗，
 并且react组件使用jsx（即是包裹一层语法糖，减少开发者的开发时的复杂操作）大大降低开发难度。