React diff 算法的原理是什么？

diff 算法探讨的就是虚拟 DOM 树发生变化后，生成 DOM 树更新补丁的方式。它通过对比新旧两株虚拟 DOM 树的变更差异，将更新补丁作用于真实 DOM，以最小成本完成视图更新。<img src="https://pic1.zhimg.com/80/v2-d052bfa08928e3c6fddbea84e197a5fc_720w.webp" alt="" data-href="" style="width: 690px;height: auto;">具体的流程如下：<ul><li style="text-align: start;">真实的 DOM 首先会映射为虚拟 DOM；</li><li style="text-align: start;">当虚拟 DOM 发生变化后，就会根据差距计算生成 patch，这个 patch 是一个结构化的数据，内容包含了增加、更新、移除等；</li><li style="text-align: start;">根据 patch 去更新真实的 DOM，反馈到用户的界面上。</li></ul><img src="https://pic2.zhimg.com/80/v2-673202e29697d90fba3ac4382c62a775_720w.webp" alt="" data-href="" style="width: 690px;height: auto;">一个简单的例子：<pre><code class="language-js">import React from 'react'
export default class ExampleComponent extends React.Component {
 render() {
 if(this.props.isVisible) {
 return &lt;div className="visible"&gt;visbile&lt;/div&gt;;
 }
 return &lt;div className="hidden"&gt;hidden&lt;/div&gt;;
 }
}
</code></pre>这里，首先假定 ExampleComponent 可见，然后再改变它的状态，让它不可见 。映射为真实的 DOM 操作是这样的，React 会创建一个 div 节点。<pre><code class="language-js">&lt;div class="visible"&gt;visbile&lt;/div&gt;
</code></pre>当把 visbile 的值变为 false 时，就会替换 class 属性为 hidden，并重写内部的 innerText 为 hidden。这样一个生成补丁、更新差异的过程统称为 diff 算法。diff算法可以总结为三个策略，分别从树、组件及元素三个层面进行复杂度的优化：策略一：忽略节点跨层级操作场景，提升比对效率。（基于树进行对比）这一策略需要进行树比对，即对树进行分层比较。树比对的处理手法是非常“暴力”的，即两棵树只对同一层次的节点进行比较，如果发现节点已经不存在了，则该节点及其子节点会被完全删除掉，不会用于进一步的比较，这就提升了比对效率。策略二：如果组件的 class 一致，则默认为相似的树结构，否则默认为不同的树结构。（基于组件进行对比）在组件比对的过程中：<ul><li style="text-align: start;">如果组件是同一类型则进行树比对；</li><li style="text-align: start;">如果不是则直接放入补丁中。</li></ul>只要父组件类型不同，就会被重新渲染。这也就是为什么 shouldComponentUpdate、PureComponent 及 React.memo 可以提高性能的原因。策略三：同一层级的子节点，可以通过标记 key 的方式进行列表对比。（基于节点进行对比）元素比对主要发生在同层级中，通过标记节点操作生成补丁。节点操作包含了插入、移动、删除等。其中节点重新排序同时涉及插入、移动、删除三个操作，所以效率消耗最大，此时策略三起到了至关重要的作用。通过标记 key 的方式，React 可以直接移动 DOM 节点，降低内耗。

DreamCoders/CoderGuide

内容风险标识

评论 (0)

DreamCoders/CoderGuide .gitee-modal { width: 500px !important; }

内容风险标识