<div style="display: none;" hidden="true" aria-hidden="true" data-nosnippet>Are you an LLM? You can read better optimized documentation at /pages/be9b53.md for this page in Markdown format</div>

shouldComponentUpdate ( 简称 SCU )

基本用法

shouldComponentUpdate(nextProps, nextState) {
  if (nextState.count !== this.state.count) {
    return true // 可以渲染
  }
  return false // 不重复渲染
}

React 默认： 父组件有更新，子组件无条件也更新

SCU 在需要的时候才优化，不要为了开发而开发

需要配合到 不可变值

eg:

onSubmit = (value) => {
  // right
  this.setState({
    list: this.state.list.concat({
      id: `id_${Date.now()}`,
      title: value
    })
  })
  
  // fail
  this.state.list.push({
    id: `id_${Date.now()}`,
    title: value
  })
  this.setState({
    list: this.state.list
  })
}

总结：

• SCU 默认返回true ，即 React 默认重新渲染所有子组件
• 必须配合 “ 不可变值 ” 一起使用
• 可先不用 SCU， 有性能问题时再考虑

PureComponent 和 React.memo

• PureCompnent ， SCU 中实现了浅比较
• memo， 函数组件中的 PureComponent
• 浅比较已使用大部分情况 （ 尽量不要做深度比较）

PureComponent eg

class List extends React.PureComponent {
  constructor(props) { ... }
  
  render() { ... }
  
  sholdComponentUpdate() { /*浅比较*/ }
}

memo eg

function MyComponent (props) {
  /* 使用 props 渲染 */
}
function areEqual(prevProps, nextProps）{
  /*
  如果把 nextProps 传入 render 方法的返回结果与
  将 prevProps 传入 render 方法的返回结果一致则返回 true,
  否则返回 false
  */
}
export default React.memo(MyComponent, areEqual);

不可变值 immutable.js

• 基于共享数据（不是深拷贝），速度好
• 有一定的学习和迁移成本，按需使用

e g：

const map1 = Immutable.Map({ a: 1, b: 2, c: 3 })
const map2 = map1.set({ 'b', 50 })
map1.get('b')  // 2
map2.get('b')  // 50