react的diff算法
2019-06-03 14:33
936 查看
eact用 三大策略 将O(n^3)复杂度 转化为 O(n)复杂度
策略一(tree diff):只对同一层次节点 进行比较。
Web UI中DOM节点跨层级的移动操作特别少,可以忽略不计。
策略二(component diff):组件D和组件G的结构相似,但是 React判断是 不同类型的组件,就会删除d创建G
拥有相同类的两个组件 生成相似的树形结构,
拥有不同类的两个组件 生成不同的树形结构。
策略三(element diff):当节点处于同一层级时,diff提供三种节点操作:删除、插入、移动。
对于同一层级的一组子节点,通过唯一id区分。
- diff算法?
:把树形结构按照层级分解,只比较同级元素。
给列表结构的每个单元添加唯一的key属性,方便比较。(同级的进行id区分)
React 只会匹配相同 class 的 component(这里面的class指的是组件的名字)
合并操作,调用 component 的 setState 方法的时候, React 将其标记为 dirty.到每一个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制.
在 React Diff 算法中 React 会借助元素的 Key 值来判断该元素是新近创建的还是被移动而来的元素,从而减少不必要的元素重渲染。
相关文章推荐
- 浅谈React的diff算法和key属性
- React 的 diff 算法
- React 的 diff 算法
- react中的虚拟Dom与diff算法
- [ReactNative] 03--ReactNative的生命周期 & render的Diff算法 & 组件之间的通信
- React基础(Diff算法,属性和状态)
- React 的 diff 算法
- 从 0 到 1 实现 React 系列 —— 3.生命周期和 diff 算法
- React Diff 算法
- React’s diff algorithm
- 中级算法之Diff Two Arrays
- React源码剖析系列 - 不可思议的react diff
- React diff
- diff winmerge 文件对比算法实践
- DOM和虚拟DOM、Diff算法
- pandas学习笔记之用于实现时间序列算法中不平稳序列差分的diff()函数
- 算法(1)K-diff Pairs in an Array
- vue diff 算法
- Finding Similar Items 文本相似度计算的算法——机器学习、词向量空间cosine、NLTK、diff、Levenshtein距离
- 详解vue的diff算法原理