Question

我们说我有以下内容：

class ThingContainer extends React.Component {
  // ...

  render() {
    return <Thing { ...someProps } />
  }
}

让我们说ThingContainer重新呈现50次，但如果Thing有一个非常广泛的shouldComponentUpdate方法限制它重新渲染两次，我是表现好吗？

换句话说，如果组件C1重新渲染50次但仅返回组件C2呈现一次或两次（C2在布局方面非常复杂），这几乎没有性能因为C2没有重新渲染？

Answer 1

显然，真正回答这个问题的唯一方法是profile your rendering time。

但是这里的细分：使用React的渲染时间总是非常非常快，几乎可以执行任何操作。这是因为它们操纵虚拟DOM，而不是实际的DOM（这是更昂贵的），并且经过大量优化以强制组件仅在必须时重新呈现（通常仅在状态或道具更改时 - 并且仅更改元素及其子女受到影响）。

除非你有明确的证据证明重新渲染是一个主要的瓶颈，否则不值得尝试不断追求性能。我记得构建一个单页的React应用程序，它将在每次有意义的交互中重新呈现整个页面 - 这是一个相当复杂的300行React应用程序 - 每次重新渲染只需要50 ms。为了比较，这是我的AJAX请求完成时间的十分之一（500毫秒）。我的网络延迟主导了我的渲染时间，以至于不值得去触摸渲染代码。

如果您的组件shouldComponentUpdate中设置C2仅渲染一次或两次，那么除非C2指定，否则将完全触及需要渲染。只会重新呈现C1 - 其子女和孙子女不会受到影响。这在下图中解释：

在图表中，组件C1需要重新呈现，但C2设置为false返回shouldComponentUpdate。 C2及其所有孩子都没有受到React的影响。这与您的案例几乎完全类比，并且适用相同的结果。您可以详细了解此in the docs：

这是一个组件子树（见图）。对于每一个，指示shouldComponentUpdate返回的内容以及虚拟DOM是否相同。最后，圆圈的颜色表示该组件是否必须进行协调。

在上面的示例中，由于shouldComponentUpdate对于以C2为根的子树返回false，因此React不需要生成新的虚拟DOM，因此，它既不需要协调DOM。请注意，React甚至不必在C4和C5上调用shouldComponentUpdate。

对于C1和C3 shouldComponentUpdate返回true，所以React必须下到叶子并检查它们。对于C6，它返回true;由于虚拟DOM不等同，因此必须协调DOM。最后一个有趣的案例是C8。对于这个节点，React必须计算虚拟DOM，但由于它等于旧的，所以它不必协调它的DOM。

请注意，React只需要对C6进行DOM突变，这是   必然。对于C8，它通过比较虚拟DOM来拯救出来   对于C2的子树和C7，它甚至不必计算虚拟   我们在shouldComponentUpdate上拯救了DOM。

容器组件是否会重新呈现性能下降？

1 个答案: