说明：

在这一讲中，我们将会学习到如下的知识点

  • React的组件原理大揭秘
  • setState()方法的大揭秘
  • jsx的语法转化的过程
  • 组价的性能优化
  • 虚拟算法
  • React的原理解密

setState的说明

setState是异步的！不会立即的更新，setState可以被调用多次，但是只会触发一次redner渲染函数，这个是react内部的性能优化机制 ，一定要注意，后面的state的一定不能依赖前面的state
image.png
使用stestate的时候有两个方式 一个是直接改变，一个是会用函数，使用函数的方式更推荐，因为可以通过传
递参数，参数有两个（state是新的state，props是旧的prop），而且这个可以灵活的改变state

setState有两个参数，后面的一个是cb回调，在这里我们可以实现一定的DOM异步操作，页面渲染之后，获取到最新的DOM，这个第二个参数类似于vue中的$nestTick(

代码的演示

image.png

jsx语法的转化流程

实际上jsx是一个语法糖而已，是React.createElement()方法的语法糖 实际上，我们的jsx会被一个image.png的puligin编译成一个React.createElement()形式，

image.png

  • 刨根问底，createElement又如何转化呢？createElementh会进一步的转化成React元素，React元素 就是一个对象，一个虚拟DOM，内部需要使用的东西也在上面

组件更新机制

image.png

优化方案1-减轻state

image.png

优化方案2-避免不必要的更新

最重要的构造函数shouldCompentsUpadta( nextProp，nextState )有两个形参，nextProp第一个最新props，nextState第二个是最新的state，在钩子函数内部this.state可以获取更新前的状态，通过对比就能判断是否重新渲染，当然，正常的项目业务不可能怎么简单。注意这里的实现方式是有多种多样的，state可以更新，prop也可以更新
image.png

优化方案3-纯组件

核心！在react中如果要修改的引用类型，一定要创建新的对象，这样有利于性能的优化
image.png

  • 内部到底是如何做到的呢？

image.png
值类型没有坑，但是引用就有！仅仅是对比了引用是不是一样的

image.png

  • 如果要解决这个问题怎么办？

    核心的办法就是重新创建一个新对象就好了可以使用assig也可以使用展开运算来实现

image.png

虚拟DOM还有Diff算法

image.png

虚拟DOM更新的过程
image.png
具体的虚拟Diff算法，请查看这篇文章
diff算法，核心就是找出渲染一棵树的最低成本