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

Question

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

Answer 1

当继承自普通的 React.Component 时，当父组件重新渲染或在组件中调用 setState 时，React 将默认在组件上调用 render() .

但是，如果您在 React 组件中实现 shouldComponentUpdate()，您将能够缩短更新周期。如果您只有有限数量的原始值(字符串、数字、 bool 值)的 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 时发生的情况之间的差异也很有用。更多关于此here 。