一、pureComponent的理解
pureComponent表示一个纯组件，可以用来优化react程序。减少render函数渲染的次数。提高性能
pureComponent进行的是浅比较，也就是说如果是引用数据类型的数据，只会比较不是同一个地址，而不会比较这个地址里面的数据是否一致
浅比较会忽略属性和或状态突变情况，其实也就是数据引用指针没有变化，而数据发生改变的时候render是不会执行的。如果我们需要重新渲染那么就需要重新开辟空间引用数据
好处：
当组件更新时，如果组件的props或者state都没有改变，render函数就不会触发。省去虚拟DOM的生成和对比过程，达到提升性能的目的。具体原因是因为react自动帮我们做了一层浅比较
二、例子
import React, { PureComponent } from "react";
export default class List extends PureComponent{
constructor(){
super();
this.state = {
userInfo:"李四",
arr:[]
}
this.handleAdd = this.handleAdd.bind(this);
this.handleModify = this.handleModify.bind(this);
}
render(){
let {userInfo,arr} = this.state;
return (
<div>
<h3>{userInfo}</h3>
<ul>
{
arr.map((item,index)=>(
<li>{item}</li>
))
}
</ul>
<button onClick={this.handleAdd}>添加</button>
<button onClick={this.handleModify}>修改</button>
</div>
)
}
handleAdd(){
//render函数不会执行 因为newArr还是引用这arr的地址 地址没有发生改变
let newArr = this.state.arr;
newArr.push("姓名");
this.setState({
arr:newArr
})
}
handleModify(){
//会执行 因为会做浅比较
this.setState({
userInfo:"张三"
})
}
}
三、使用场景
1、PureComponent一般会用在一些纯展示组件上。切结props和state不能使用同一个引用
2、在通过PureComponent进行组件的创建的时候不能够在写shouldComponentUpdate. 否则会引发警告