乐趣区

关于javascript:React-diff原理

React diff 分为三种:

  • tree diff
  • component diff
  • element diff

具体的流程为:

  • 把树形构造依照层级合成,只比拟同级元素
  • 给列表构造的每个单元增加惟一的 key 属性,不便比拟。
  • React 只会匹配雷同 class 的 component(这外面的 class 指的是组件的名字)
  • 合并操作,调用 component 的 setState 办法的时候,React 将其标记为 dirty。到每一个事件循环完结,React 查看所有标记 dirty 的 component 从新绘制
  • 抉择性子树渲染。开发人员能够重写 shouldComponentUpdate 进步 diff 的性能

相应的链接:React diff 知乎

退出移动版