react精髓之一---diff算法

Miyang 发布于2019-08-19 18:05 / 2077人阅读

摘要：传统算法的一大特点就是虚拟的算法，下图为实现流程图。如果的子节点仍有子节点依旧顺次执行。我们来观察下复杂度传统算法的复杂度为，单纯从看，复杂度不到，但实际上。通过制定大胆的策略，将复杂度的问题转换成复杂度的问题。

从react渲染开始：

　　在说react虚拟dom之前我们先来看看react渲染过程，下面链接是根据源码渲染过程写的简写版。
http://1.sharemandy.sinaapp.c... 有js基础的比较好理解，也写了注释，不再详细展开。了解了初始化渲染后，再来看如何对比渲染。

传统diff算法

react的一大特点就是虚拟DOM的diff算法，下图为diff实现流程图。

现在我们就主要分析下react的diff算法：
react的算法和传统算法有多不同，下面是我对传统算法的理解画的流程图（欢迎讨论）：

　　图很清楚，其实传统算法就是对每个节点一一对比，循环遍历所有的子节点，然后判断子节点的更新状态，分别为remove、add、change。如果before的子节点仍有子节点依旧顺次执行。
　　我们来观察下复杂度,传统 diff 算法的复杂度为 O(n^3)，单纯从demo看，复杂度不到n3，但实际上。
React 通过制定大胆的策略，将 O(n^3) 复杂度的问题转换成 O(n) 复杂度的问题。
　　其实算法直接降低这么多，肯定是有多牺牲的，或者说是是指定了特定的策略，定制化的实现了所需算法。react就是如此，他根据自己的特点，实现了部分代码的简化。

上面的特点为react的核心，其实react的核心代码并不多，所以很多人都深究过，很多文章都有详细解释，在下面的好文章收录中都有提到，这里不再赘述，只做总结。

下篇我们就会讲讲diff算法的详细流程图

好文章收录：
react算法源码地址：https://github.com/facebook/r...
论文算法详解：http://grfia.dlsi.ua.es/ml/al...
react源码剖析（这篇文章对图中移位算法有详细解释）：http://zhuanlan.zhihu.com/p/2...
源码分析：http://purplebamboo.github.io/

海外云主机服务器托管 javascript精髓数据分析之一基础java的精髓 diff

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79182.html

从零自己编写一个React框架【中高级前端杀手锏级别技能】

摘要：想要自己实现一个简易版框架，并不是非常难。为了防止出现这种情况，我们需要改变整体的策略。上面这段话，说的就是版本和架构的区别。 showImg(https://segmentfault.com/img/bVbwfRh); 想要自己实现一个React简易版框架，并不是非常难。但是你需要先了解下面这些知识点如果你能阅读以下的文章，那么会更轻松的阅读本文章：优化你的超大型React应用 ...

hot_pot_Leo 2019-08-30 15:44 评论0 收藏0
从零自己编写一个React框架【中高级前端杀手锏级别技能】

摘要：想要自己实现一个简易版框架，并不是非常难。为了防止出现这种情况，我们需要改变整体的策略。上面这段话，说的就是版本和架构的区别。 showImg(https://segmentfault.com/img/bVbwfRh); 想要自己实现一个React简易版框架，并不是非常难。但是你需要先了解下面这些知识点如果你能阅读以下的文章，那么会更轻松的阅读本文章：优化你的超大型React应用 ...

codecook 2019-08-26 10:42 评论0 收藏0
[译]React 元素 vs React 组件 vs 组件支撑实例

摘要：元素和组件实例都不表示真实元素。我希望这篇文章能够帮助你理清这些术语参考资料翻译成支撑实例来自于理解中方法创建组件的声明式编程和命令式编程的比较对循环提示增加的研究精髓之一算法本篇为译文，原文出处：React Elements vs React Components vs Component Backing Instances 许多人可能听说过 Facebook 的 React 库，...

gnehc 2019-08-20 16:02 评论0 收藏0
react虚拟dom机制与diff算法

摘要：的一个突出特点是拥有极速地渲染性能。该功能依靠的就是研发团队弄出的虚拟机制以及其独特的算法。在的算法下，在同一位置对比前后节点只要发现不同，就会删除操作前的节点包括其子节点，替换为操作后的节点。 React的一个突出特点是拥有极速地渲染性能。该功能依靠的就是facebook研发团队弄出的虚拟dom机制以及其独特的diff算法。下面简单解释一下react虚拟dom机制和diff算法的实现...

jzman 2019-08-21 11:53 评论0 收藏0
React专题：react，redux以及react-redux常见一些面试题

摘要：我们可以为元素添加属性然后在回调函数中接受该元素在树中的句柄，该值会作为回调函数的第一个参数返回。使用最常见的用法就是传入一个对象。单向数据流，比较有序，有便于管理，它随着视图库的开发而被概念化。面试中问框架，经常会问到一些原理性的东西，明明一直在用，也知道怎么用，但面试时却答不上来，也是挺尴尬的，就干脆把react相关的问题查了下资料，再按自己的理解整理了下这些答案。 reac...

darcrand 2019-08-23 13:41 评论0 收藏0