Diffing算法
简介
- 当对比两棵树时,React 首先比较两棵树的根节点。不同类型的根节点元素会有不同的形态。
对比不同类型的元素
- 当根节点为不同类型的元素时,React 会拆卸原有的树并且建立起新的树。举个例子,当一个
元素从 <a> 变成 <img>,从 <Article> 变成 <Comment>,或从 <Button> 变成 <div> 都会触发一个完整的重建流程。
- 当卸载一棵树时,对应的 DOM 节点也会被销毁。组件实例将执行 componentWillUnmoun()
方法。当建立一棵新的树时,对应的 DOM 节点会被创建以及插入到 DOM 中。组件实例将执行
UNSAFE_componentWillMount() 方法,紧接着 componentDidMount() 方法。所有与之前的
树相关联的 state 也会被销毁。
大约 3 分钟