在什么情况下 setState() 不会导致 React 组件中的重新渲染？

Question

我知道通常 React 组件的 props 或状态的任何更改都会导致它重新渲染，但是setState()可以进行调用而不导致重新渲染的情况是什么？

Answer 1

当继承自普通React.ComponentReact 时，默认情况下render()会在父组件重新渲染或在组件中调用 setState 时调用组件。

但是，如果您在 React 组件中实现 shouldComponentUpdate()，您将能够缩短更新周期。如果您只有有限数量的原始值（字符串、数字、布尔值）或使用不可变数据结构的 props，这将非常有用。然后你可以简单地做这样的事情：

shouldComponentUpdate(nextProps, nextState) {
  return nextState.name !== this.state.name // Don't re-render if name is equal
}

shouldComponentUpdate() 的默认实现是

shouldComponentUpdate(nextProps, nextState) {
  return true;
}

也可以从 React.PureComponent 继承，它基本上实现了 props 和 state 的浅比较。

我会推荐以下文章以获得更深入的答案：https : //reactjs.org/docs/optimizing-performance.html#avoid-reconciliation 和https://cdb.reacttraining.com/react-inline-functions- and-performance-bdff784f5578（特别是名为（PureComponent 和 shouldComponentUpdate）的部分

理解调用渲染函数时发生的事情与协调算法更新 DOM 时发生的事情之间的区别也很有用。更多关于这里。