class Sub extends React.Component {
    render() {
      console.log('sub render');
    return (
        <div>
        sub
      </div>
    )
  }
}
class App extends React.Component {
    state = {
      count: 0
  }
    onClick = () => {
      this.setState({
        count: this.state.count + 1
    });
  }
  render() {
      console.log('render');
    const {count} = this.state;
    return (
        <div>
          <Sub name='zhangsan' />
        <p>{count}</p>
        <button onClick={this.onClick}>button</button>
      </div>
    )
  }
}
ReactDOM.render(<App />, document.getElmenetById('root'));

父组件更新，会重新渲染。子组件虽然没有什么更新，但是也会被重新渲染。
更新的特性：父组件的更新会导致子组件的更新

优化点：如果子组件没有状态的更新，即使父组件更新，重新渲染。子组件也不需要重新渲染。

shouldComponentUpdate

利用这个 shouldComponentUpdate 的生命周期钩子函数，但目前已经不常用
sholdComponentUpdate(nextProps, nextStates)
有两个参数

• 下次更新 props
• 下次更新 state

返回一个 boolean

• true 更新

• false 不更新

  class Sub extends React.Component {
  shouldCompnentUpdate(nextProps, nextState) {
      console.log(nextProps.name, this.props.name);
    return nextProps.name !== this.props.name
  }
    render() {
      console.log('sub render');
    return (
        <div>
        sub
      </div>
    )
  }
  }

  PureComponent

  不用手写 shouldComponentUpdate，React.PureComponent 以浅层对比 prop 和 state 的方式来实现 shouldComponentUpdate()

  class Sub extends React.PureComponent {
  render() {
    console.log('sub render');
    return (
      <div>
        sub
      </div>
    )
  }
  }

  注意 Props 每次都生成一个新值的话 React.PureComponent 是起不了作用

  class App extends React.Component {
    state = {
      count: 0
  }
    onClick = () => {
      this.setState({
        count: this.state.count + 1
    });
  }
  callback = () => {
  }
  render() {
      console.log('render');
    const {count} = this.state;
    return (
        <div>
          <Sub cb={() => this.callback()} />
        <p>{count}</p>
        <button onClick={this.onClick}>button</button>
      </div>
    )
  }
  }

  18 行，每次都是 () => this.callback() 一个新的函数，PureCompoment 就没效了。
  改为直接使用 class field

  class App extends React.Component {
    state = {
      count: 0
  }
    onClick = () => {
      this.setState({
        count: this.state.count + 1
    });
  }
  callback = () => {
  }
  render() {
      console.log('render');
    const {count} = this.state;
    return (
        <div>
          <Sub cb={this.callback} />
        <p>{count}</p>
        <button onClick={this.onClick}>button</button>
      </div>
    )
  }
  }

  memo

  memo hooks 用于函数组件，起到与类组件 PureComponent 一样的效果

  const Sub = React.memo((params) => { 
  console.log('sub render');
  return (
    <div>
      sub
    </div>
  ) 
  });