跳至主要內容
Diffing算法原理

Diffing算法

简介

    - 当对比两棵树时,React 首先比较两棵树的根节点。不同类型的根节点元素会有不同的形态。
    对比不同类型的元素

    - 当根节点为不同类型的元素时,React 会拆卸原有的树并且建立起新的树。举个例子,当一个
    元素从 <a> 变成 <img>,从 <Article> 变成 <Comment>,或从 <Button> 变成 <div> 都会触发一个完整的重建流程。

    - 当卸载一棵树时,对应的 DOM 节点也会被销毁。组件实例将执行 componentWillUnmoun()
    方法。当建立一棵新的树时,对应的 DOM 节点会被创建以及插入到 DOM 中。组件实例将执行 
    UNSAFE_componentWillMount() 方法,紧接着 componentDidMount() 方法。所有与之前的
    树相关联的 state 也会被销毁。

yyshino大约 3 分钟FrontEndDiffing