您现在的位置是:主页 > Web前端技术 > Web前端技术

React中调和算法Diffing算法策略的示例分析开发技术

IDCBT2021-12-29服务器技术人已围观

简介这篇文章主要为大家展示了“React中调和算法Diffing算法策略的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“React中调和

这篇文章主要为大家展示了“React中调和算法Diffing算法策略的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“React中调和算法Diffing算法策略的示例分析”这篇文章吧。

算法策略

React的调和算法,主要发生在render阶段,调和算法并不是一个特定的算法函数,而是指在调和过程中,为提高构建workInProcess树的性能,以及Dom树更新的性能,而采用的一种策略,又称diffing算法。 在React 的官网上描述“Diffing” 算法时,提到了“diffing two trees”,但是在源码实现时,并不是创建好两棵树后,再从上往下的diffing这两棵树。这个diffing发生在搭建子节点时, 实际是新生成的ReactElement 与 current树上fibe节点的diffing。 为了将diffing算法的时间复杂度控制在O(n)(树diff的时间复杂度涉及到树的编辑距离,可以看这里), 采用了如下策略:

只比较同层级的节点,(貌似这一点没有在官网中提到)

对于单节点比较,如果当前节点type 和 key 不相同,不再比较其下子节点,直接删掉该节点及其下整棵子树,根据ReactElement重新生成节点树。因为React认为不同类型的组件生成的树形结构不一样,不必复用。

如果子节点是数组,可根据唯一的key值定位节点进行比较,这样即使子节点顺序发生变化,也可以根据key值进行复用。

值得注意的是,所有节点的diffing都会比较key,key 默认值为null。若是没有设置,则null是恒等于null的,认为key是相同的。

单节点diffing

单个节点进行diffing时,会diffing两组属性:fibe.elementType vs ReactElement.type , fibe.key vs ReactElement.key, 如果这两组属性都相等,数据结构的物理空间会有如下复用逻辑(详见源码reconcileSingleElement函数):

    如果current fibe 存在 alternate 节点,(这意味着这个fibe节点之前参与过调和),则复用该alternate节点的物理空间;否则需要clone current fibe节点,占用新的物理空间

    对应的instance 或者 Dom 会被复用

    current fibe 下的child树也会被直接挂载过来(下一步递归子节点时,会被使用)

如果两组属性有一个不相等:

    fibe 根据ReactElement重新创建

    对应的instance和Dom 也会重建

    child 树全部删除。

    如果生成的ReactElement 是单节点,但是对应的current树上是多节点时,会从逐一查找有没有匹配的,找到匹配的,其他的都删除;找不到,全部删除。例如Couter组件有如下逻辑:当点击次数大于10时,隐藏点击按钮。当到达第10次时,span节点会被复用。

    class Counter extends React.Component{
        state={
            count:0
        }
        addCount = ()=>{
            const count = this.state.count+1;
            this.setState({count})
        }
        componentDidUpdate(){
            console.log("updated")
        }
        render(){
            return this.state.count < 10 ? [
                <button onClick={this.addCount}>点击</button>
                <span>点击次数:{this.state.count}</span>
            ]:<span>点击次数:{this.state.count}</span>;
        }
    }

    标签:

    很赞哦! ()

本栏推荐