React 纯组件 PureComponet

说明：

PureComponet 与 React.Component 功能相似

区别：

PureComponet 内部自动实现了shouldComponentUpdate 钩子 不需要手动比较

原理：

纯组件内部通过分别对比前后俩次props和state的值，来决定是否重新渲染组件
如果没有数据的变化，则不会重新渲染组件

class Hello extends React.PureComponet{
  render(){
    return (
      <div>纯组件</div>
    )
  }
}

理解

纯组件内部的对比时shallow compare(浅层对比)
对于值类型来说：比较俩个值是否相同（直接赋值即可，没有坑）
对于引用类型来说：只比较对象的引用（地址）是否相同
注意：state 或 props 中属性值为引用类型时，应该创建新对象数据，不要直接修改原始数据

// state 或 props 中属性值 为对象
const newObj={...state.obj,需要改变的值/新增的属性}
setState({obj:newObj})

// state 或 props 中属性值 为数组
不要用数组的push/unshift等直接修改当前数组的方法
应该用concat 或 slice 等这些返回新数组的方法
this.setState({
  list:[...this.state.list,{新数据}]
})

总之：不要直接对state中的原始数据进行修改