React如何更快的完成diff的比较

diff算法是能够更加高效快捷更新页面元素的算法，那如何帮助diff更快呢？

那答案就一定是合理的使用key。

diff的调用是在reconcileChildren中的reconcileChildFibers，当没有可以复用current fiber节点时，就会走mountChildFibers，当有的时候就走reconcileChildFibers。

而reconcilerChildFibers的函数中则会针render函数返回的新的jsx数据进行判断，它是否是对象，就会判断它的newChild.$$typeof是否是REACT_ELEMENT_TYPE，如果是就按单节点处理。 如果不是继续判断是否是REACT_PORTAL_TYPE或者REACT_LAZY_TYPE。

继续判断它是否为数组，或者可迭代对象。

而在单节点处理函数reconcileSingleElement中，会执行如下逻辑：

• 通过 key,判断上次更新的时候的 Fiber 节点是否存在对应的 DOM 节点。 如果没有 则直接走创建流程，新生成一个 Fiber 节点，并返回
• 如果有，那么就会继续判断，DOM 节点是否可以复用？

• 如果有，就将上次更新的 Fiber节点的副本作为本次新生的Fiber 节点并返回

• 如果没有，那么就标记 DOM 需要被删除，新生成一个 Fiber 节点并返回。

React 是如何判断一个 Fiber 节点是否可以被复用的。

• 第一步：判断element的 key 和fiber 的key 是否相同

• 如果不相同，就会创建新的 Fiber,并返回

• 第二步：如果相同，就判断element.type和fiber的 type 是否相同，type 就是他们的类型，比如p标签就是p，div标签就是div.如果 type 不相同，那么就会标识删除。

• 如果相同，那就可以可以判断可以复用了，返回existing。

而在多节点更新的时候，key的作用则更加重要，React 会通过遍历新旧数据，数组和链表来通过按个判断它们的key和 type 来决定是否复用。

言而总之，需要合理的使用key来加快diff算法的比对和fiber的复用。

那么如何合理使用key呢。

其实很简单，只需要每一次设置的值和我们的数据一直就可以了。不要使用数组的下标，这种key和数据没有关联，我们的数据发生了更新，结果 React 还指望着复用。