目录

  • diffing 简介

diffing 简介

diff 是什么？

Diffing 是一种算法，通过循环递归的方法计算一个树形结构和另一个树形结构的差异

React 为什么用 diff？

React render 方法会创建一棵由 React 元素组成的树，在下一次 state 和 props 更新时，相同的 render 方法会返回一棵不同的树。React 需要基于这两棵树之间的差别更新 UI 以保证当前 UI 与最新的树同步

React diff 具体规则？

对比不同类型的元素

根节点为不同类型的元素时，React 会拆卸原有的树并且建立起新的树，组件实例将执行 componentWillUnmount 方法

非根节点为不同类型的元素时，React 会拆卸原有节点并且建立新的节点

对比同一类型的元素

对比两个相同类型的 React 元素时，React 会保留 DOM 节点，仅对比更新有改变的属性

对比同类型的组件元素

组件实例保持不变，React 将更新改组件实例的 props 以跟最新的元素保持一致，并触发 componentWillReceiveProps 和 componentWillUpdate 方法