高级性能.pdfVIP

⾼级性能 人们首先会考虑的是 React 是能否和其他非 React 版本一样能快速和响应一个项 目。重新绘制 件的整个子树来回应每一个状态变化的想法让人怀疑是否这个过程中 对性能产生负面影响。React 使用几个巧妙的技巧，以减少所需的更新用户界面所需 要的昂贵的文档用户模型操作的数目。 避免调和文档对象模型 React 使用了一个虚拟的 DOM，这是的浏览器中对于 DOM 树呈现的一个描述符。 这种并行表示形式让 React 避免产生 DOM 节点和访问现有的节点，比 JavaScript 对象的操作速度较慢。当一个 件的道具或状态改变，React 决定通过构建一个新的 虚拟 DOM 来进行实际的 DOM 更新和旧的 DOM 相比是否必要。只有在比较结果不 一样的情况下，Reac t尽可能少的应用转变来融合文档对象模型。 在此之上，React 提供了一个 件的生命周期功能，shouldComponentUpdate ， 这是在重新绘制过程开始之前触发 （虚拟 DOM 比较，可能最终调和 DOM），使开 发人员能够减少过程中的循环步骤。这个函数的默认实现返回 true ，让 React 来 执行更新： shouldComponentUpdate: function(nextProps, nextState) { return true; } 请记住，React 将非常频繁的调用这个函数，所以实现必须要快。 比如说你有一个 由几个聊天线程 成的消息应用程序。假设只有一个线程已经改变。如果我们 在 ChatThread 上执行 shouldComponentUpdate ，React 可以为其他线程跳过 描绘步骤： shouldComponentUpdate: function(nextProps, nextState) { // T D : return whether or not current chat thread is // different to former one.} 因此，简言之，React 避免调和 DOM 产生的复杂的 DOM 操作，允许用户使 用 shouldComponentUpdate 缩短过程中的循环步骤，而且，对于那些需要更新， 通过对比虚拟的 DOM 来实现。 起作用的 shouldComponentUpdate 下面是 件的子树。对于每一个 件表示 shouldComponentUpdate 的返回值，以 及是否与虚拟的 DOM 是等价的。最后，圆的颜色指示 件是否必须调和。 在上面的例子中，由于 shouldComponentUpdate 返回值为 false ，存在 C2 中，React 没有必要产生新的虚拟的 DOM，并且因此，也不需要调和 DOM。需要 注意的是 react 甚至没有在 C4 和 C5 处调用 shouldComponentUpdate 。 对于 C1 和 C3 shouldComponentUpdate 返回 true ，所以 React 不得不深入 到叶子节点并且进行检查。 对于 C6 它返回 true ；由于和虚拟的 DOM 并不等同，它不得不调和 DOM。最后 一个有趣的例子是 C 。此节点的 React 必须计算虚拟 DOM，但因为它和原来的 DOM 相同，它不需要调和 DOM。 请注意，只有 C6 需要 React 不得不对 DOM 做转变，这是不可避免的。对于 C 通过比较虚拟的 DOM 他不需要转变，但是对 C2 的子树和 C7来说，它甚至没有计 算虚拟 DOM，只需要通过执行 shouldComponentUpdate 。 所以，我们应该如何执行 shouldComponentUpdate 呢？比如现有一个仅需呈现一 个字符串值的 件： React.createClass({ propsTypes: { value: React.PropTypes.string.isRequired }, render: function() { return divps.value/div; } }); 我们可以很容易地实现 shouldComponentUpdate ，如下： shouldComponentUpdate: function(nextProps, nextState) { return ps.value !== nextProps.val