了解 React Diff 算法
输入“/”快速插入内容
了解 React Diff 算法
了解 React Diff 算法
📍
文章目标：看完理解 react diff 实现原理
前提
React Diff 只对虚拟 DOM 树进行分层比较，不考虑节点的跨层级比较。
Diff 分类
React diff 分为单节点 diff 和 多节点 diff。After 进入 diff 的层级是多个节点就是 多节点 Diff， After 进入 diff 的层级是当个节点就是单节点 Diff。
为什么需要分单节点 diff 和多节点 diff 呢？
•
从代码角度看是 在 createElement 的时候，并没有将所有的child变为数组，而是区分了单子节点和多子节点的情况。导致后面 diff 也需要区分这两种情况。
代码块
export const createElement = (type, config, ...children) => {
const props: ReactElementProps = config || {};
const length = children.length;
// 多个children使用数组的形式, 没有 children 就没有 children 字段
if (length === 1) {
props.children = children[0];
} else if (length > 1) {
props.children = children;
}
return createReactElement(type, null, props);
}
•
如果在 createElement 中将 children 都处理为数组的形式，是不是在 diff 的时候就可以同构为都以多节点的形式了？
代码块
// 多节点所有情况如下
[A, B, C, D] => [A]
[A, B, C, D] => [A, B, D]
[B] => [A]
// 单节点所有情况如下
[A, B, C] => A
B => A
既然多节点都支持了 [A] 这种形式的 Diff，那是不是证明将单节点同构成多节点是可行的？
即：单节点所有情况变成如下
[A, B, C] => [A]
[B] => [A]
看起来好像是的，也不理解为什么react不这么做。