react diff算法

React 分别对以下三个部分进行了 diff 算法优化
https://www.cnblogs.com/forcheng/p/13246874.html#:~:text=React 最为核心的就是 Virtual DOM 和 Diff 算法。 React ,Diff%20%E7%AE%97%E6%B3%95%EF%BC%8C%E6%AF%94%E8%BE%83%E6%96%B0%E6%97%A7%E8%99%9A%E6%8B%9F%20DOM%20%E6%A0%91%EF%BC%8C%E6%89%BE%E5%87%BA%E6%9C%80%E5%B0%8F%E7%9A%84%E6%9C%89%E5%8F%98%E5%8C%96%E7%9A%84%E9%83%A8%E5%88%86%EF%BC%8C%E5%B0%86%E8%BF%99%E4%B8%AA%E5%8F%98%E5%8C%96%E7%9A%84%E9%83%A8%E5%88%86%EF%BC%88Patch%EF%BC%89%E5%8A%A0%E5%85%A5%E9%98%9F%E5%88%97%EF%BC%8C%E6%9C%80%E7%BB%88%E6%89%B9%E9%87%8F%E7%9A%84%E6%9B%B4%E6%96%B0%E8%BF%99%E4%BA%9B%20Patch%20%E5%88%B0%E5%AE%9E%E9%99%85%E7%9A%84%20DOM%20%E4%B8%AD%E3%80%82
tree diff
component diff
element diff

tree diff
React 只对虚拟 DOM 树进行分层比较,不考虑节点的跨层级比较

component diff策略:
对于不同类型的组件,默认不需要进行比较操作,直接重新创建。
对于同类型组件, 通过让开发人员自定义shouldComponentUpdate()方法来进行比较优化,减少组件不必要的比较。如果没有自定义,shouldComponentUpdate()方法默认返回true,默认每次组件发生数据(state & props)变化时,都会进行比较

element diff
就是通过唯一 key 来进行 diff 优化,通过复用已有的节点,减少节点的删除和创建操作

React 通过大胆的假设,制定对应的 diff 策略,将 O(n3) 复杂度的问题转换成 O(n) 复杂度的问题
通过分层对比策略,对 tree diff 进行算法优化
通过相同类生成相似树形结构,不同类生成不同树形结构以及shouldComponentUpdate策略,对 component diff 进行算法优化
通过设置唯一 key 策略,对 element diff 进行算法优化

posted @ 2021-10-19 15:00  SANGRING  阅读(76)  评论(0)    收藏  举报