react总结

Posted 2020-08-30

 

写这个总结的想法主要是来源于我的一个同事，他资历比较深，突然问我最近有没有在学习什么框架，我说在学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 的渲染性能。