react diff 原理

1.把树形结构按照层级分解,只比较同级元素。

2.给列表结构的每个单元添加唯一的 key 属性,方便比较。

3.React 只会匹配相同 class 的 component(这里面的 class 指的是组件的名字)

4.合并操作,调用 component 的 setState 方法的时候, React 将其标记为 dirty.到每一个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制.

5.选择性子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能。

  • 7
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React diff算法是React用来在虚拟DOM树中找到变化并更新实际DOM的一种算法。它的原理是通过比较新旧虚拟DOM树的差异,然后只更新真正发生变化的部分,而不是直接重新渲染整个页面。 React diff算法的高阶原理是通过三个步骤来进行差异比较: 1. 树的遍历:首先,React会对新旧两棵虚拟DOM树进行深度优先遍历,找出所有的节点并进行标记。 2. 节点的比较:在遍历过程中,React会比较新旧两个节点的类型(标签名)和属性。如果类型相同且属性相同,则认为这个节点是相同的,不需要更新。如果类型不同,则直接替换该节点。如果类型相同但属性不同,则更新该节点的属性。 3. 子节点的递归比较:如果两个节点相同,并且有子节点,则会对子节点进行递归比较。React会对子节点列表进行遍历,并在新旧子节点列表中找出相同的节点进行比较。如果找到了相同的节点,则继续递归比较其子节点。如果没有找到相同的节点,则说明这是一个新增或者删除的节点,需要进行相应的操作。 通过这种方式,React diff算法可以高效地找到变化的节点并进行更新,避免了无谓的重复渲染,提升了性能。但是需要注意的是,React diff算法并不是完全精确的,有时候可能会出现误判或者不够高效的情况,所以在开发中还需要注意一些优化策略,例如使用key属性来帮助React更准确地识别节点的变化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值