透过React Virtual DOM diff算法来开发更高效的程序

React引入Virtual DOM,在程序与DOM之间,在此之前,程序直接操作DOM,所以DOM的更新依赖于DOM本身的更新策略及算法,以此来决定是否需要页面重排、重绘。Virtual DOM是一个在DOM之上的,可以理解成一个虚拟的DOM,通过自身的diff算法,然后以最小幅度的去更新DOM。

React 源码剖析系列 - 不可思议的 react diff,该文通过React的diff源码去分析,在写React程序时,有哪些可以注意的点,哪些会影响到页面性能的。文章最后给出了如下总结:

  • React 通过制定大胆的 diff 策略,将 O(n3) 复杂度的问题转换成 O(n) 复杂度的问题;
  • React 通过分层求异的策略,对 tree diff 进行算法优化;
  • React 通过相同类生成相似树形结构,不同类生成不同树形结构的策略,对 component diff 进行算法优化;
  • React 通过设置唯一 key的策略,对 element diff 进行算法优化;
  • 建议,在开发组件时,保持稳定的 DOM 结构会有助于性能的提升;
  • 建议,在开发过程中,尽量减少类似将最后一个节点移动到列表首部的操作,当节点数量过大或更新操作过于频繁时,在一定程度上会影响 React 的渲染性能。

深入解析React,该文章介绍了React的工作方式。

关于Virtual DOM这种策略,有多种方案的实现。virtual-dom包就是实现了一套新的Virtual DOM方案。

最后,React宣称高效,但是也是有前提的,至少官方建议需要遵循的。


扫描下载RNTools
与React Native更贴近