React--diff算法的三种优化策略
2023-06-13 09:15:54 时间
bug收集:专门解决与收集bug的网站
网址:www.bugshouji.com
React Diff算法的优化
1. 同层节点之间相互比较,不会跨节点比较(tree diff);
2. 开发中,可以通过key来指定哪些节点在不同的渲染下保持稳定(element diff);
3. 不同类型的节点,产生不同的树结构(component diff);
树的优化策略(tree diff)
两个虚拟 DOM 进行比对时,从上往下进行比对,如果同一层比对存在差异时就不会继续进行比对
元素的优化策略(element diff)
引入 key 值提高比对性能,其中 key 值最好不要为 index,应该是固定、唯一的值,比如 item、id 等
组件的优化策略(component diff)
Diff 算法默认同层存在差异时就不会继续进行比对,而是替换整个差异部分,如果子组件数据改变同样也会被替换掉,可以借助 shouldComponentUpdate
避免频繁更新
参考:
https://www.cnblogs.com/bpone/p/14900203.html
苟有恒 , 何必三更眠五更起
相关文章
- 【NLP基础】英文关键词抽取RAKE算法
- 深入React Diff算法
- Python 一网打尽<排序算法>之从玩转冒泡排序开始
- java中sort排序_数据结构算法总结
- Js排序算法_js 排序算法
- React源码分析4-深度理解diff算法
- 《算法竞赛进阶指南》0x13 链表与邻接表
- 拉链表的展开算法_如何求展开式的系数
- 尺度空间原理_多尺度分割算法原理
- 聊聊 Vue 的双端 diff 算法
- react的jsx和React.createElement是什么关系?面试常问_2023-02-27
- 常见的算法优化套路,用空间换时间
- react源码分析:深度理解React.Context
- 算法的复杂性分析
- Golang实现算法-约瑟夫环
- 【数据挖掘】关联规则挖掘 Apriori 算法 ( 关联规则性质 | 非频繁项集超集性质 | 频繁项集子集性质 | 项集与超集支持度性质 )
- 二叉搜索树算法详解与Java实现编程语言
- java学习深度优先算法详解编程语言
- [PHP] 排序和查找算法详解编程语言
- Java数据结构和算法(七)——链表详解编程语言
- 一文详解神经网络 BP 算法原理及 Python 实现
- PHP快速排序算法详解