react总结

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react总结相关的知识,希望对你有一定的参考价值。

 

写这个总结的想法主要是来源于我的一个同事,他资历比较深,突然问我最近有没有在学习什么框架,我说在学react,他问我,为什么要学习react,然后我说了几点react的好处,其中一点是:react的虚拟DOM,不需要操作真实的DOM,从而减少性能消耗。然后他问了我一个很有意思的问题,当两个很复杂的DOM树,相互比较的时候,也很消费时间的,问我react是怎么去减少这个时间的消耗呢?然后我也很奇怪,我能想到的就是通过深度遍历或者广度遍历来获取每一个子节点,然后进行比较,但是这样操作的复杂度很高,性能消耗也很大。于是百度了一下,看到了DOM Diff这个算法,下面推荐一篇文章

https://www.w3ctech.com/topic/1598

 

详解 React diff

传统 diff 算法的复杂度为 O(n3),显然这是无法满足性能要求的。React 通过制定大胆的策略,将 O(n3) 复杂度的问题转换成 O(n) 复杂度的问题。

diff 策略

  1. Web UI 中 DOM 节点跨层级的移动操作特别少,可以忽略不计。
  2. 拥有相同类的两个组件将会生成相似的树形结构,拥有不同类的两个组件将会生成不同的树形结构。
  3. 对于同一层级的一组子节点,它们可以通过唯一 id 进行区分。

基于以上三个前提策略,React 分别对 tree diff、component diff 以及 element diff 进行算法优化,事实也证明这三个前提策略是合理且准确的,它保证了整体界面构建的性能。

  • tree diff
  • component diff
  • element diff

 

 

总结

  • React 通过制定大胆的 diff 策略,将 O(n3) 复杂度的问题转换成 O(n) 复杂度的问题;

  • React 通过分层求异的策略,对 tree diff 进行算法优化;

  • React 通过相同类生成相似树形结构,不同类生成不同树形结构的策略,对 component diff 进行算法优化;

  • React 通过设置唯一 key的策略,对 element diff 进行算法优化;

  • 建议,在开发组件时,保持稳定的 DOM 结构会有助于性能的提升;

  • 建议,在开发过程中,尽量减少类似将最后一个节点移动到列表首部的操作,当节点数量过大或更新操作过于频繁时,在一定程度上会影响 React 的渲染性能。

以上是关于react总结的主要内容,如果未能解决你的问题,请参考以下文章

React 学习笔记总结

React 学习笔记总结

React 学习笔记总结

react 小白 常用方法总结

react 小白 常用方法总结

react总结