Virtual DOM与React diff原理理解

一 Virtual DOM理解：https://www.w3cplus.com/javascript/understand-the-Virtual-DOM.html

主要从三个方面理解：一个对象，两个前提，三个步骤：

1. 一个对象指的是Virtual DOM是一个基本的JavaScript对象，也是整个Virtual DOM树的基本。
2. 两个前提分别是JavaScript很快和直接操作DOM很慢，这是Virtual DOM得以实现的两个基本前提。得益于V8引擎的出现，让JavaScript可以高效地运行，在性能上有了极大的提高。直接操作DOM的低效和JavaScript的高效相对比，为Virtual DOM的产生提供了大前提。
3. 三个步骤指的是Virtual DOM的三个重要步骤，分别是：生成Virtual DOM树、对比两棵树的差异、更新视图。

• • 生成 Virtual DOM 树：一个DOM节点包含了很多的内容，但是一个抽象出一个DOM节点却只需要三部分：节点类型，节点属性、子节点。所以围绕这三个部分，我们可以使用JavaScript简单地实现一棵DOM树，然后给节点实现渲染方法，就可以实现虚拟节点到真是DOM的转化。
  • 对比两棵树的差异：比较两棵DOM树的差异是Virtual DOM算法最核心的部分，这也是我们常说的的 Virtual DOM的diff算法。
  • 更新视图。

 

二  React diff原理：https://zhuanlan.zhihu.com/p/20346379

老的 Diff 算法提出了三个策略来保证整体界面构建的性能，具体是：

1. Web UI 中 DOM 节点跨层级的移动操作特别少，可以忽略不计。

2. 拥有相同类的两个组件将会生成相似的树形结构，拥有不同类的两个组件将会生成不同的树形结构。

3. 对于同一层级的一组子节点，它们可以通过唯一 id 进行区分。

基于以上三个前提策略，React 分别对 tree diff、component diff 以及 element diff 进行算法优化：

1. 通过分层求异的策略，对 tree diff 进行算法优化；
2. 通过相同类生成相似树形结构，不同类生成不同树形结构的策略，对 component diff 进行算法优化；
3. 通过设置唯一 key的策略，对 element diff 进行算法优化；

 

三 React Fiber 架构：https://mp.weixin.qq.com/s?__biz=MzI1ODk2Mjk0Nw==&mid=2247484469&idx=1&sn=f68d044f1b0e4e2eb981e3878427b75b&scene=21#wechat_redirect

diff算法缺点：

面对数量庞大层级复杂的节点业务，大量dom的更新占用过多的内存和计算时间将导致：1 渲染UI不流畅 2 用户时间操作得不到及时反馈。

React Fiber架构意义：

React Fiber是react执行渲染时的一种新的调度策略，JavaScript是单线程的，一旦组件开始更新，主线程就一直被React控制，这个时候如果再次执行交互操作，就会卡顿。

React Fiber重构这种方式，渲染过程采用切片的方式，每执行一会儿，就歇一会儿。如果有优先级更高的任务到来以后呢，就会先去执行，降低页面发生卡顿的可能性，使得React对动画等实时性要求较高的场景体验更好。

 

四 React中keys作用：

key是React中用于追踪哪些列表中元素被修改、删除或者被添加的辅助标识。

在diff算法中，key用来判断该元素节点是被移动过来的还是新创建的元素，减少不必要的元素重复渲染。