shouldComponentUpdate（SCU）

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

默认值返回的是 true。
React默认：父组件有更新，子组件则无条件更新 <=> SCU 默认返回一个 true
性能优化对于 React 更加重要
SCU 一定要每次都用么？—— 不一定，需要的时候才优化

shouldComponentUpdate(nextProps, nextState) {
  if (_.isEqual(nextProps.list, this.props.list)) {
    return false;
  }
  return true;
}
// 假设使用了错误的更新方法
this.state.list.push('some string');
this.setState({
  list: this.state.list
})
// 立马就会出现bug，组件就不会渲染了
// react 为了避免错误写法导致 BUG，默认SCU是true

scu 一定要配合 不可变值 使用

PureComponent 和 React.memo

• PureComponent , SCU中实现了浅比较
• memo，函数组件中的 PureComponent

• 浅比较已可覆盖大部分情况（尽量不要做深度比较）

  class Demo extends React.PureComponent {}
  // 类似于
  class Demo extends React.Component {
  shouldComponentUpdate() {/*做了浅比较*/}
  }

  immutable.js

• 彻底拥抱 不可变值

• 基于共享数据（不是深拷贝），速度好
• 有一定的学习和迁移成本，按需使用 ```jsx import Immutable from ‘immutable’; const map1 = Immutable.Map({a:1, b:2}); const map2 = map1.set(‘b’, 50);

map1.get(‘b’); // 2 map2.get(‘b’); // 50 ```