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 ,如需转载请自行联系原作者
相关文章
|
2月前
|
JavaScript 前端开发 算法
React技术栈-虚拟DOM和DOM diff算法
这篇文章介绍了React技术栈中的虚拟DOM和DOM diff算法,并通过一个实际案例展示了如何使用React组件和状态管理来实现动态更新UI。
41 2
|
3月前
|
JavaScript 前端开发 算法
react中虚拟dom和diff算法
在React中,虚拟DOM(Virtual DOM)和Diff算法是两个核心概念,它们共同工作以提高应用的性能和效率。
41 4
|
27天前
|
算法 JavaScript UED
Diff 算法的实现原理
【10月更文挑战第18天】Diff 算法是 Vue.js 中实现高效 DOM 更新的核心机制,通过合理的比较和优化策略,能够在保证界面正确性的同时,最大程度地减少 DOM 操作,提高应用的性能和用户体验。
26 2
|
27天前
|
算法 JavaScript
Vue 中的 Diff 算法
【10月更文挑战第18天】需要注意的是,Diff 算法虽然能够提高性能,但在某些复杂的场景下,可能仍然会存在一些性能瓶颈。因此,在实际开发中,我们需要根据具体情况合理地使用 Diff 算法,并结合其他优化手段来提高应用的性能。
12 1
|
1月前
|
JavaScript 算法 前端开发
vue 中diff算法
【10月更文挑战第10天】
29 1
|
2月前
|
移动开发 前端开发
react项目配合diff实现文件对比差异功能
在React项目中,可以使用`diff`库实现文件内容对比差异功能。首先安装`diff`库,然后在组件中引入并使用`Diff.diffChars`或`Diff.diffLines`方法比较文本差异。通过循环遍历`diff`结果,可以生成不同样式的HTML元素来高亮显示文本差异。
117 1
react项目配合diff实现文件对比差异功能
|
1月前
|
JavaScript 算法 前端开发
【VUE】Vue的diff算法和React的diff算法
【VUE】Vue的diff算法和React的diff算法
|
2月前
|
XML JavaScript 前端开发
学习react基础(1)_虚拟dom、diff算法、函数和class创建组件
本文介绍了React的核心概念,包括虚拟DOM、Diff算法以及如何通过函数和类创建React组件。
29 2
|
3月前
|
前端开发 算法 JavaScript
React原理之Diff算法
【8月更文挑战第24天】
|
2月前
|
机器学习/深度学习 JavaScript 算法
面试中的网红虚拟DOM,你知多少呢?深入解读diff算法
该文章深入探讨了虚拟DOM的概念及其diff算法,解释了虚拟DOM如何最小化实际DOM的更新,以此提升web应用的性能,并详细分析了diff算法的实现机制。