更新组件：mini-vue -- runtime-core模块（十九）
2023-09-08 16:57:49
组件更新：深入浅出揭秘 React 运行时的奥秘
在 React 的运行时环境中，元素的更新是一个复杂而关键的过程，而组件更新相较之下则显得更为简单。本文将深入探讨组件更新的实现机制，揭示 React 如何巧妙地复用元素更新的逻辑，并针对组件的特殊性进行优化。
复用 Patch Props
组件更新的第一步是对 props 进行更新。这一过程直接复用了元素更新中的 patchProps 方法。毕竟，无论是元素还是组件，更新 props 的本质都是一样的。
Patch Children：巧用 Diff 算法
对于组件的 children，即子元素的更新，我们需要使用 Diff 算法来确定需要更新、删除或新增的子元素。然而，与元素的 Diff 算法不同，组件的 Diff 算法必须考虑一个额外的因素：组件 Key 。
组件 Key 是组件的一个唯一标识符，用于判断两个组件是否是同一个组件。如果组件 Key 相同，则进行更新操作；否则，直接进行销毁和新建操作。
const patchChildren = (n1, n2, container) => {
const oldChildren = n1.children;
const newChildren = n2.children;
if (sameVNodeType(n1, n2)) {
updateChildren(n1, n2, container);
} else {
// TODO
}
};
判断同类型组件
确定两个组件是否是同类型组件的方法与元素更新中的判断方法相同：
const sameVNodeType = (n1, n2) => {
return n1.type === n2.type;
};
更新子组件
对于类型相同的组件，我们可以调用 updateChildren 方法进行更新。该方法内部主要分以下三个步骤：
- 对比新旧两个子组件的 key，如果 key 不同，直接销毁老组件，并创建新组件。
- 如果 key 相同，则对比新旧两个子组件的 props，使用 patchProps 方法更新 props。
- 对比新旧两个子组件的 children，使用 patchChildren 方法更新 children。
销毁组件
对于需要销毁的组件，我们可以直接调用组件实例上的 unmount 方法，进行销毁操作。
更新组件
对于需要更新的组件，我们可以直接调用组件实例上的 update 方法，进行更新操作。
总结
至此，我们已经深入探讨了组件更新的实现机制。组件更新巧妙地复用了元素更新中的大量方法和逻辑，并针对组件的特殊性增加了组件 Key 的判断，以及 updateChildren 方法中对 props 和 children 的更新。
随着我们对 React 运行时环境的逐步完善，组件更新也将变得更加完善和强大。
常见问题解答
1. 为什么组件更新需要考虑组件 Key？
组件 Key 用于判断两个组件是否是同一个组件，从而避免不必要的更新操作和状态丢失。
2. 如何为组件设置组件 Key？
通常情况下，我们可以在创建组件时，为组件的 props 指定一个唯一标识符作为组件 Key。
3. 为什么组件更新可以复用元素更新中的 patchProps 方法？
因为 props 更新的本质在元素和组件中是一样的，都是更新组件或元素的状态。
4. updateChildren 方法中为什么要分三个步骤更新？
因为更新子组件涉及到 key 比较、props 更新和 children 更新，需要按部就班地进行。
5. 组件更新中使用了哪些优化技巧？
组件更新复用了元素更新中的 patchProps 方法和 Diff 算法，减少了重复代码并提高了效率。
