React diff原理

时间:2020-9-12 作者:admin

React diff 分为三种:

  • tree diff
  • component diff
  • element diff

具体的流程为:

  • 把树形结构按照层级分解,只比较同级元素
  • 给列表结构的每个单元添加唯一的 key 属性,方便比较。
  • React只会匹配相同class的component(这里面的class指的是组件的名字)
  • 合并操作,调用component的setState方法的时候,React将其标记为dirty。到每一个事件循环结束,React检查所有标记dirty的component重新绘制
  • 选择性子树渲染。开发人员可以重写shouldComponentUpdate提高diff的性能

相应的链接:React diff知乎

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。