React Diff 的一些疑问

首先回顾一下 React Diff

React在每次render的时候会生成一个Virtual Dom树,会跟上一次生成的Dom树来做对比,得到最有效的更新,每当对比有差异时候会产生一个mutation

策略:

  1. 节点的跨层级移动几乎不会出现,不考虑这种情况,
  2. 认为统一类型的节点生成相同的dom树,不同的生成不同的dom树
  3. 同一层的子节点可以通过key来区分组件的唯一性

方式

tree diff
    对比根节点类型不一样的类型生成不一样的树,如果不一样会把之前的树干掉重新生成
component diff
    先对比类型,如果不一样,会标记成dirty component,会重新创建dom,如果一样的话,按照原策略继续
 element diff
    element diff中定义来三种操作,增加,删除,移动  巴拉巴拉

然后我的问题是

element diff 都是根据key 来标示的,但是其实发现开发中除了列表,几乎很少使用key,那么diff是怎么判断两个节点是不是之前的节点呢?
image.png
文档中也说了,会针对每个元素mutate, 这个地方就很奇妙, 不理解这个mutate是什么意思

{ xxx ? <div>1212</div> : <div>1212</div> }
如果我这么写,如果状态变了在react diff的时候怎么判断是同一个节点还是不同的节点

还是说生成dom树的时候会默认生成一个内部的key来标示?

阅读 1.2k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题