React的渲染机制：Reconciliation

很多人翻译为 “一致化处理过程”，直译为 “协调”

1. props 或 state 改变 

2. render 函数返回不同的元素树

3. 新旧 DOM 树对比 diff

4. 针对差异的地方进行更新

5. 渲染为真实 DOM 树

React 采用的是虚拟 DOM 即 VDOM

• 每次属性 props 和状态 state 发生变化时，render 函数返回不同的元素树

• React 会检测当前返回的元素树和上次渲染的元素树之前的差异，然后针对差异的地方进行更新操作，最后渲染为真实 DOM

• 核心就是就是进行新旧 DOM 树对比的 diff 算法

性能优化，首当其冲的工作就是 减少 diff 的过程

• 利用 shouldComponentUpdate 这个生命周期函数

  • 默认的 shouldComponentUpdate 会在 props 或 state 发生改变时返回 true，表示组件会重新渲染，从而调用 render 函数，进行新旧 DOM 树的 diff 比对。

  • 但是我们可以在这个生命周期函数里面做一些判断，然后返回一个布尔值，返回 true 则表示立即更新当前控件，false 则不更新当前组件

  • 换句话说，我们可以通过 shouldComponentUpdate 控制是否发生 VDOM 树的 diff 过程

shouldComponent

• 如果一个节点的 shouldComponentUpdate 返回 false，则该节点和该节点下面所有的后代节点都不需要进行 VDOM 节点对比。

• 如果一个节点的 shouldComponentUpdate 返回 true

  • 如果该节点的类型相同，则继续进入到下一层进行对比。

  • 如果该节点的类型不同，React 会直接将 原 VDOM 树上该节点以及该节点下所有的后代节点全部删除，然后替换为新 VDOM 树上同一位置的节点。

能够合理利用 shouldComponentUpdate 可以避免不必要的 Reconciliation 过程，使得应用性能可以更加优秀

• 一般 shouldComponentUpdate 会比较 props 和 state 中的属性是否发生改变 浅比较 来判定是否返回 true，从而触发 Reconciliation 过程

  • 类组件中可以使用 PureComponent 这个 API

  • 函数组件中提供了一个 memo 方法，但是它只进行了 props 的浅比较

    function Home () {
        //xxx
    } 

    export default React.memo (Home);