React diff

最新推荐文章于 2024-08-14 22:37:27 发布

橙煦媛

最新推荐文章于 2024-08-14 22:37:27 发布

阅读量487

点赞数

分类专栏： react 文章标签： diff react

本文链接：https://blog.csdn.net/u012937029/article/details/76522686

版权

React的Reconciliation阶段采用diff算法，通过元素类型是否相同分为不同处理方式。不同类型的元素会导致整个树重建，相同类型则更新属性或递归处理子节点。相同类型的组件保持实例不变，更新属性。使用key优化子节点的比较，提高性能。React diff提供了INSERT_MARKUP、MOVE_EXISTING和REMOVE_NODE三种操作处理节点变化。

摘要由CSDN通过智能技术生成

传统diff算法

传统diff算法通过循环递归对节点进行依次对比，效率低下，算法复杂度达到 O(n^3)，其中 n 是树中节点的总数

let result = [];
const diffLeafs = function (beforeLeaf, afterLeaf) {
   
    // 获取较大节点树的长度
    let count = Math.max(beforeLeaf.children.length, afterLeaf.children.length);
    // 循环遍历
    for (let i = 0; i < count; i++) {
        const beforeTag = beforeLeaf.children[i];
        const afterTag = afterLeaf.children[i];
        if (beforeTag === undefined) {
            result.push({ type: "add", element: afterTag });
        } else if (afterTag === undefined) {
            esult.push({ type: "remove", element: beforeTag });
        } else if (beforeTag.tagName !== afterTag.tagName) {
            result.push({ type: "remove", element: beforeTag });
            result.push({ type: "add", element: afterTag });
        } else if (beforeTag.innerHTML !== afterTag.innerHTML) {
  // 节点不变而内容改变时，改变节点
            if (beforeTag.children.length === 0) {
                result.push({
                    type: "changed",
                    beforeElement: beforeTag,
                    afterElement: afterTag,
                    html: afterTag.innerHTML
                });
            } else {
                diffLeafs(beforeTag, afterTag);
            }
        }
    }
    return result;
}

http://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf

若我们在React中使用，展示1000个元素则需要进行10亿次的比较。这操作太过昂贵，相反，React基于两点假设，实现了一个启发的O(n)算法：

两个不同类型的元素将产生不同的树。
通过渲染器附带key属性，开发者可以示意哪些子元素可能是稳定的。

React Reconciliation(一致性比较)

1. 元素类型不相同

无论什么时候，当根元素类型不同时，React 将会销毁原先的树并重写构建新的树。从 <a> 到 <img> ，或者从 <Article> 到 <Comment> ，从<Button> 到 <div> – 这些都将导致全部重新构建。

当销毁原先的树时，之前的 DOM 节点将销毁。实例组件执行 componentWillUnmount() 。当构建新的一个树，新的 DOM 节点将会插入 DOM 中。组件将会执行 componentWillMount() 以及 componentDidMount()。与之前旧的树相关的 state 都