React. PureComponent

这是一个浅比较组件
频繁更新state或者props的时候组件频繁去对比渲染
这时候需要做处理假如数据相同就取消渲染
可以使用shouldComponentUpdate生命周期函数来处理比较假如相同返回false就行

shouldComponentUpdate(){
      ...  
    }

当然每次这样处理很麻烦
可以直接使用PureComponent组件来处理这种情况
但是PureComponent有缺点它只是浅比较
不做深层比较所以参数不要嵌套太深，所以规避深层复杂繁琐比较，引用地址变化它就会放弃比较
所以我们需要传值类型的数据，或者保证引用类型的引用地址不会变化，而且只有一层不会有更深层的嵌套

//使用...来展开数据传值，
function Page1(){
let props={name:"jm",age:18}
  return  //✅
}
class Page extends React.PureComponent{
  render(){
      return 
姓名：{this.props.name}，年龄：{this.props.age}
  }
}

//错误的使用
function Page1(){
let props={name:"jm",age:18}
  return //❌
}
class Page extends React.PureComponent{
  render(){
      return 
姓名：{this.props.props.name}，年龄：{this.props.props.name}
  }
}

更大的去提升性能

函数组件怎么使用PureComponent用到React.memo高阶组件来实现

function Page1(){
let props={name:"jm",age:18}
  return  
}
function Page(props){
    return 
姓名：{props.name}，年龄：{props.age}
}
export default React.memo(Page);//✅

详细参考官方资料