1 分钟带你入门 React SCU、memo、pureCom

...  
shouldComponentUpdate(nextProps, nextState) {
    if (this.props.color !== nextProps.color) {
      return true;
    }
    if (this.state.count !== nextState.count) {
      return true;
    }
    return false;
  }
...

...
  handleCount = () => {
    this.state.list.push(Math.random()) // !!!想这样直接修改数组原数组的
    this.setState({list: this.state.list})
  }
  shouldComponentUpdate(nextProps, nexState) {
    return nexState.list !== this.state.list // 这里永远都会返回false
  }
...

...
  handleCount = () => {
    this.setState({list: this.state.list.concat(Math.random())}) // 返回一个新的数组
  }
  shouldComponentUpdate(nextProps, nexState) {
    return nexState.list !== this.state.list
  }
...

...
class Demo extends React.pureComponent {
	...
  shouldComponentUpdate(nextProps, nextState) { // 这个函数不需要你手写,这里只是为了展示
		.... // 这里React自动做了浅层对比
  }
}

function MyComponent(props) {
  /* render using props */
}
function areEqual(prevProps, nextProps) { // 默认不用谢,除非你要自定义对比规则
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
}
export default React.memo(MyComponent, areEqual);