react 虚拟 dom

虚拟 dom本质上就是 在 js 和 真实 dom 之间加了一个缓存,利用 diff 算法,避免了没有必要的 dom 操作,提高性能。

虚拟 dom 并不一定会提高性能: 

        1 :在首次渲染的时候,因为要创建一层额外的 虚拟 dom 也就是 js 对象,肯定不如直接操作 dom 会增加开销

        2: 在视图复杂的情况下, 会提升渲染性能, 有频繁操作 dom 的话, 虚拟dom在更新真实 dom 之前会通过 diff 算法对比 新旧两个 dom 树的差异,然后在吧最终的差异表现到 真实 dom 上,不会每次直接操作 真实 dom 。另外可以给节点设置 key ,让节点重用避免大量的重绘节省性能。

react 中 key 的作用: 

        在 diff 算法中 判断元素是最新创建的还是 移动来的。从而减少不必要的 diff 提高diff 同级比较的效率。避免原地复用带来的副作用。key 使用来追踪 列表元素被修改 增加删除的唯一标识。必须要保证 key 的唯一性。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值