Component和PureComponent
首先来说一下 Component
和 PureComponent
的区别,其实他们俩基本是一样的,因为后者继承前者,细微的区别就是 PureComponent
可能会帮我们提升程序的性能,怎么说呢?它的内部实现了 shouldComponentUpdate
方法,我们应该都知道这个方法是干嘛的吧,帮助我们减少不必要的 render
,我们通常会在 shouldComponentUpdate
方法中判断props或者state的值是不是和之前的一样,然后来决定是否重新 render
,来看一个最简单的例子:
class Test extends PureComponent<any, any> {
constructor(props: any) {
super(props)
this.state = {
isShow: false,
}
}
click = () => {
this.setState({
isShow: true
})
}
render() {
console.log('render');
return (
<div>
<button onClick={this.click}>index</button>
<p>{this.state.isShow.toString()}</p>
</div>
)
}
}
在上面这个例子中,通过按钮去改变state中isShow这个属性的值,但是第一次改变之后后面这个值就不会变了,如果用PureComponent的话那么只会在第一次点击的时候会重新render,但是使用Component的话,那么每次点击都会触发render。所以这里使用PureComponent能帮我们提升一定的性能。那么有些人可能就会说那我是不是只用PureComponent就好了,那我只能说
image.png我们把上面的isShow参数换一下,换成一个对象试试:
constructor(props: any) {
super(props)
this.state = {
user: {
name: '24K纯帅',
gender: '男'
}
}
console.log('constructor');
}
click = () => {
this.setState((preState: any) => {
const { user } = preState
user.name = "Jack"
return { user }
}, () => {
console.log(this.state.user)
})
}
render() {
console.log('render');
return (
<div>
<Button primary="true" onClick={this.click}>index</Button>
<Button>{this.state.user.name}</Button>
</div>
)
}
}
我们发现如果使用PureComponent的话,点击按钮之后都不会触发render了,使用Component才行,看到这里是不是脑袋一大堆问号
image.png原来PureComponent内部实现的shouldComponentUpdate方法只是进行了浅比较,怎么说呢,你可以理解为只是针对基本数据类型才有用,对于对象这种引用数据类型是不行的。
React.memo()
其实这个和PureComponent功能是一样的,只不过memo是提供给函数组件使用的,而PureComponent是提供给class组件使用的,还有一点就是memo提供一个参数可以让我们自行配置可以对引用数据做比较然后触发render
网友评论