这是一个浅比较组件
频繁更新state或者props的时候组件频繁去对比渲染
这时候需要做处理假如数据相同就取消渲染
可以使用shouldComponentUpdate生命周期函数来处理比较假如相同返回false就行
shouldComponentUpdate(){
...
}
当然每次这样处理很麻烦
可以直接使用PureComponent组件来处理这种情况
但是PureComponent有缺点它只是浅比较
不做深层比较所以参数不要嵌套太深，所以规避深层复杂繁琐比较，引用地址变化它就会放弃比较
所以我们需要传值类型的数据，或者保证引用类型的引用地址不会变化，而且只有一层不会有更深层的嵌套
//使用...来展开数据传值，
function Page1(){
let props={name:"jm",age:18}
return <Page {...props}/> //✅
}
class Page extends React.PureComponent{
render(){
return <div>姓名：{this.props.name}，年龄：{this.props.age}</div>
}
}
//错误的使用
function Page1(){
let props={name:"jm",age:18}
return <Page props={props}/>//❌
}
class Page extends React.PureComponent{
render(){
return <div>姓名：{this.props.props.name}，年龄：{this.props.props.name}</div>
}
}
更大的去提升性能
函数组件怎么使用PureComponent用到React.memo高阶组件来实现
function Page1(){
let props={name:"jm",age:18}
return <Page {...props}/>
}
function Page(props){
return <div>姓名：{props.name}，年龄：{props.age}</div>
}
export default React.memo(Page);//✅
