reactjs - 对我的应用程序中的所有组件使用 shouldComponentUpdate 是一个好主意吗？

Question

LoDash 有精彩的 method _.isEqual。使用以下方法是个好主意吗:

shouldComponentUpdate(newProps, newState) {
  return !_.isEqual(newsProps, this.props) || !_.isEqual(newState, this.state);
}

对于我的应用程序中的所有组件？如果不是，为什么？

Answer 1

很可能，没有。尽管组件可能会重新渲染，但这并不一定意味着 DOM 将会更新。 React 在幕后进行一些比较，因此仅在 DOM 实际需要更改时才更新 DOM(有关此的更多信息 here )。

此外，LoDash 的 isEqual 方法会执行深度比较，这意味着它会遍历对象或数组(或给定的任何内容)并检查每个子项的比较属性以及该元素的每个子元素的子元素(依此类推)到另一个值的子元素。对于小对象，这不会花费很长时间，但当对象变大时，可能会变得非常耗时。

即使您向 isEqual 方法传递一些可以快速比较的内容，也可能有一种更有效的方法来处理这个问题。通常，组件的 render 方法只需要几毫秒，并且如上所述，DOM 仅在某些内容实际不同时才会更新。如果您有异常昂贵的渲染方法，您可能需要使用 Pure Component 。纯组件进行浅层 props 比较，不会递归到每个对象子对象。这样，如果 Prop 看起来相同，它可以跳过渲染函数。请注意，如果 props 中有嵌套属性，纯组件将无法捕获它们，并且您的组件将不会重新渲染。

通常，如果您想延迟渲染直到 props 包含某些值(例如 this.props.someValue && this.props.someOtherValue)，您只需使用 shouldComponentUpdate >)，如果您从服务器获取数据并且想要等到拥有所有数据后再渲染组件，这非常有用。您可能想要使用shouldComponentUpdate的另一种情况是当您渲染项目列表时。如果其中一个子项发生变化并且整个列表需要重新渲染，您可以通过检查渲染所需的 Prop 来模拟纯组件，否则跳过渲染。还有其他用例，但它们通常是独特的，您可能会知道何时应该使用shouldComponentUpdate。

最后，使用 shouldComponentUpdate 通常是一种性能优化。如果您的 React 应用程序没有遇到性能问题，您可能不需要使用它。