diff算法探讨的就是虚拟DOM树发生变化后，生成DOM树更新补丁的方式。它通过对比新旧两株虚拟DOM树的变更差异，将更新补丁作用于真实DOM，以最小成本完成视图更新具体流程：真实DOM与虚拟DOM之间存在一个映射关系。这个映射关系依靠初始化时的JSX建立完成；当虚拟DOM发生变化后，就会根据差距计算生成patch，这个patch是一个结构化的数据，内容包含了增加、更新、移除等；最后再根据patch去更新真实的DOM，反馈到用户的界面上。在回答有何不同之前，首先需要说明下什么是diff算法。diff算法是指生成更新补丁的方式，主要应用于虚拟DOM树变化后，更新真实DOM。所以diff算法一定存在这样一个过程：触发更新→生成补丁→应用补丁React的diff算法，触发更新的时机主要在state变化与hooks调用之后。此时触发虚拟DOM树变更遍历，采用了深度优先遍历算法。但传统的遍历方式，效率较低。为了优化效率，使用了分治的方式。将单一节点比对转化为了3种类型节点的比对，分别是树、组件及元素，以此提升效率。树比对：由于网页视图中较少有跨层级节点移动，两株虚拟DOM树只对同一层次的节点进行比较。组件比对：如果组件是同一类型，则进行树比对，如果不是，则直接放入到补丁中。元素比对：主要发生在同层级中，通过标记节点操作生成补丁，节点操作对应真实的DOM剪裁操作。同一层级的子节点，可以通过标记key的方式进行列表对比。以上是经典的Reactdiff算法内容。自React16起，引入了Fiber架构。为了使整个更新过程可随时暂停恢复，节点与树分别采用了FiberNode与FiberTree进行重构。fiberNode使用了双链表的结构，可以直接找到兄弟节点与子节点然后拿Vue和Preact与React的diff算法进行对比Preact的Diff算法相较于React，整体设计思路相似，但最底层的元素采用了真实DOM对比操作，也没有采用Fiber设计。Vue的Diff算法整体也与React相似，同样未实现Fiber设计然后进行横向比较，React拥有完整的Diff算法策略，且拥有随时中断更新的时间切片能力，在大批量节点更新的极端情况下，拥有更友好的交互体验。Preact可以在一些对性能要求不高，仅需要渲染框架的简单场景下应用。Vue的整体diff策略与React对齐，虽然缺乏时间切片能力，但这并不意味着Vue的性能更差，因为在Vue3初期引入过，后期因为收益不高移除掉了。除了高帧率动画，在Vue中其他的场景几乎都可以使用防抖和节流去提高响应性能。学习原理的目的就是应用。那如何根据Reactdiff算法原理优化代码呢？这个问题其实按优化方式逆向回答即可。根据diff算法的设计原则，应尽量避免跨层级节点移动。通过设置唯一key进行优化，尽量减少组件层级深度。因为过深的层级会加深遍历深度，带来性能问题。设置shouldComponentUpdate或者React.pureComponet减少diff次数。预览时标签不可点收录于合集#个上一篇下一篇
转载请注明：http://www.0431gb208.com/sjszyzl/897.html
