React的Diff算法

简介:

使用React或者RN开发APP如果不知道Diff算法的话简直是说不过去啊。毕竟“知其然,知其所以然”这句老话从远古喊到现代了。

以下内容基本是官网文章的一个总结、压缩。这次要谦虚一下,毕竟深入研究RN的时间不多,如果有什么理解的不对的地方还请各位读者指正。

React的组件在渲染之后组成了一个树形结构。在React绘制的时候,会在内存里对应每一个组件建立一个节点,并最终形成一个和组件树结构一样的树。我们就叫这个树叫影子树(这个叫法不是出自官方)。我们可以理解为这个影子树包含了React App组建的结构和一些属性值

在组件发生变化的时候(一般是调用了setState),React会形成一个影子树二号。然后对比影子树1号和影子树2号的不同。

我们知道对比两个树的最小不同的时间复杂度是O(n3
),n是树里的节点数。这个复杂度下,稍有量级的应用都会遇到一个问题:无法忽略的慢。于是,FB的同学们使用了更加高效的启发式算法,把复杂度降低到了O(n)。

但是,不管是什么算法最后都需要对比两个节点的不同。有三种情况需要考虑:

一、节点之间的比较

节点,英语里的Node,包括两种类型:一个是React组件,一个是HTML的DOM。下文也是同样的含义。

节点类型不同

如果是HTML DOM不同的话,直接使用新的替换旧的。

如果是组件类型不同的话也直接使用新的替换旧的。

HTML DOM类型相同

在React里样式并不是一个纯粹的字符串,而是一个对象,这样的话在样式发生改变的时候只需要改变替换变化以后的样式。修改完当前节点之后,递归处理该节点的子节点。

组件类型相同

组件类型相同的,使用React机制处理。一般是使用新的props替换掉旧的props,并在之后调用组件的componentWill/DidReceiveProps方法,之前的组件的render方法会被调用。节点的比较机制开始递归作用于这个它的子节点上。

二、两个列表之间的比较

一列节点中的一个发生了改变,React并没有什么好方法来处理这个问题。循环新旧两个列表,并找出不同是React唯一的处理方法。

但是,有一个可以把这个算法的复杂度降低的办法。那就是我们在生成一列节点的时候给每一个节点上添加一个key。这个key只需要在这一列节点中唯一,不需要全局唯一

三、取舍

需要注意的是,上面的启发式算法是基于两点假设:
类型想听的节点总是生成同样的树,而类型不同的节点也总是生成不同的树。
可以为多次render都表现稳定的节点设置key。

上面的节点之间的比较算法基本就是基于这两个假设而实现的。也就是要提高React应用的效率,需要我们按照这两点假设来开发

否则,React会重获整个APP。那就是噩梦一样的情况了。

欢迎加群互相学习,共同进步。QQ群:iOS: 58099570 | Android: 572064792 | Nodejs:329118122 做人要厚道,转载请注明出处!



















本文转自张昺华-sky博客园博客,原文链接:http://www.cnblogs.com/sunshine-anycall/p/5950650.html ,如需转载请自行联系原作者
相关文章
|
1月前
|
算法 前端开发 JavaScript
React的diff算法原理
React的diff算法原理
66 0
|
1月前
|
JavaScript 算法 开发者
vue diff算法介绍
vue diff算法介绍
34 2
|
4天前
|
JavaScript 算法 前端开发
vue和react的diff算法的区别
vue和react的diff算法的区别
|
1月前
|
JavaScript 算法 前端开发
基于抽象语法树+diff算法实现Markdown编译器
基于抽象语法树+diff算法实现Markdown编译器
|
1月前
|
JavaScript 算法 对象存储
Vue是如何diff算法的
【4月更文挑战第24天】Vue 的 diff 算法核心是对比新旧虚拟 DOM 树,通过比较节点类型、属性及子节点,采用双指针策略和 key 判断,实现高效更新。当节点类型或属性变化时,Vue 更新或替换节点。子节点比较则尝试最小化 DOM 操作,通过 key 优化列表变更。算法递归处理组件和子节点,最终生成补丁对象来更新真实 DOM,提升性能。开发中,合理使用 key 和优化状态变化可进一步提升性能。
|
1月前
|
JavaScript 前端开发 算法
React中的DOM diff算法是如何工作的
React的DOM diff算法通过对比新旧虚拟DOM树找到最小更新策略,提高组件更新效率。它生成并比较虚拟DOM,按类型、属性和"key"逐节点检查。不同类型节点直接替换,属性不同则更新属性,相同则递归比较子节点。确定DOM操作后批量执行,减少对真实DOM的访问,优化性能。然而,在复杂场景下可能有性能问题,可借助shouldComponentUpdate、memo或PureComponent等进行优化。
|
3天前
|
机器学习/深度学习 算法 数据可视化
m基于PSO-LSTM粒子群优化长短记忆网络的电力负荷数据预测算法matlab仿真
在MATLAB 2022a中,应用PSO优化的LSTM模型提升了电力负荷预测效果。优化前预测波动大,优化后预测更稳定。PSO借鉴群体智能,寻找LSTM超参数(如学习率、隐藏层大小)的最优组合,以最小化误差。LSTM通过门控机制处理序列数据。代码显示了模型训练、预测及误差可视化过程。经过优化,模型性能得到改善。
18 6
|
3天前
|
算法 调度
基于变异混合蛙跳算法的车间调度最优化matlab仿真,可以任意调整工件数和机器数,输出甘特图
**摘要:** 实现变异混合蛙跳算法的MATLAB2022a版车间调度优化程序,支持动态调整工件和机器数,输出甘特图。核心算法结合SFLA与变异策略,解决Job-Shop Scheduling Problem,最小化总完成时间。SFLA模拟蛙群行为,分组进行局部搜索和全局信息交换。变异策略增强全局探索,避免局部最优。程序初始化随机解,按规则更新,经多次迭代和信息交换后终止。
|
8天前
|
算法 JavaScript 决策智能
基于禁忌搜索算法的TSP路径规划matlab仿真
**摘要:** 使用禁忌搜索算法解决旅行商问题(TSP),在MATLAB2022a中实现路径规划,显示优化曲线与路线图。TSP寻找最短城市访问路径,算法通过避免局部最优,利用禁忌列表不断调整顺序。关键步骤包括初始路径选择、邻域搜索、解评估、选择及禁忌列表更新。过程示意图展示搜索效果。
|
8天前
|
机器学习/深度学习 算法
基于BP神经网络和小波变换特征提取的烟草香型分类算法matlab仿真,分为浓香型,清香型和中间香型
```markdown 探索烟草香型分类:使用Matlab2022a中的BP神经网络结合小波变换。小波分析揭示香气成分的局部特征,降低维度,PCA等用于特征选择。BP网络随后处理这些特征,以区分浓香、清香和中间香型。 ```