0
点赞
收藏
分享

微信扫一扫

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 节点是否可以被复用的。

  • 第一步:判断elementkeyfiberkey 是否相同

<!---->

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

<!---->

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

<!---->

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

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

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

那么如何合理使用key呢。

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

举报

相关推荐

0 条评论