一：React.Component

1：没有做任何渲染优化，只要触发this.setState 就会执行render的刷新操作，会重构virtual DOM，进行diff对比决定是否更新

Class Sum extends React.Component {
      constructor(props){
            super(props);
            this.state = {
                  num:0
            }
      }
      shouldCompoentUpdate(nextProps,nextState){
            if(nextPorps.sum === this.props.sum && nextState.num === this.state.num){  
                  return false; 
            }
            return ture; 
      }
      render(){
            return (
                  <div>
                      <span>{this.state.num}</span>
                    
                  </div>
            )
      }
}

二：React.PureComponent

1：表示一个纯组件

2：可以用来优化React程序，减少render函数执行的次数，从而提高组件的性能

3：进行的是浅比较，会忽略属性和或状态突变情况，如果组件的props或者state都没有改变，render函数就不会触发

4：仅可以用在ClassComponent中

Class Sum extends React.PureComponent {
// 会自动进行props 和 sate 的浅比较 
}

三：React.memo功能同PureComponent

1：表示为高阶组件，可以用在ClassComponent、functionComponent中

function Add (props){
      return (
            <div>sum = {props.y + props.x}</div>
      )
}
export default React.memo(Add)