react原理三( diff算法)

发布网友发布时间：2022-10-22 04:54

我来回答

共1个回答

热心网友时间：2024-11-03 16:29

a. 传统js优化后的写法：循环拼接100个，然后一次性触发dom操作。

b. react通过深度优先遍历(DFS)，循环创建createElement，createTextNode，搞毛呀这岂不是比上一种方法慢多了，所以才要引出我们的主角diff算法。

一：对比当前真实的DOM和虚拟DOM，在对比过程中直接更新真实DOM。
二：只对比同一层级的变化实现。

有的框架会选择保存上次渲染的虚拟DOM，然后对比虚拟DOM前后的变化；我们选选择直接对比虚拟DOM和真实DOM，一边对比一边更新；

1）对比文本节点：如果当前的DOM就是文本节点，则直接更新内容，否则就新建一个文本节点，并移除掉原来的DOM（"hello p" => "hello ge p"）。

2）对比元素节点：新旧节点不同就是，增新删旧（<div> => <p>）；只新增；只删除。

3）对比属性节点：旧的属性删掉，新的属性添加（<img src='' id=''/> => <img src='' className=''/>）。

4）对比子节点：旧的属性删掉，新的属性添加（<img src='' id=''/> => <img src='' className=''/>）。

4.1 为啥对比子节点？子节点是一个数组，它们可能改变了顺序，或者数量有所变化，我们很难确定要和虚拟DOM对比的是哪一个。
4.2 给节点设一个key值，重新渲染时对比key值相同的节点。新增dom.appendChild(child)；删除removeNode( f )；插入dom.insertBefore( child, f )

5）对比组件：

5.1 如果组件类型没有变化，则重新set props。（<AComponent props={oldProps} /> => <AComponent props={newProps} />）
5.2 如果组件类型变化，则移除掉原来组件，并渲染新的组件。（<AComponent /> => <BComponent />）