PureComponent通过prop和state的浅比较来实现shouldComponentUpdate,
所谓浅比较
(shallowEqual),即react源码中的一个函数,然后根据下面的方法进行是不是PureComponent
的判断,帮我们做了本来应该我们在shouldComponentUpdate
中做的事情
if (this._compositeType === CompositeTypes.PureClass) {
shouldUpdate = !shallowEqual(prevProps, nextProps) || ! shallowEqual(inst.state, nextState);
}
而本来我们做的事情如下,这里判断了state
有没有发生变化(prop同理),从而决定要不要重新渲染,这里的函数在一个继承了Component
的组件中,而这里this.state.person
是一个对象,你会发现,在这个对象的引用没有发生变化的时候是不会重新render
的(即下面提到的第三点),所以我们可以用shouldComponentUpdate
进行优化,这个方法如果返回false
,表示不需要重新进行渲染,返回true
则重新渲染,默认返回true
shouldComponentUpdate(nextProps, nextState) {
return (nextState.person !== this.state.person);
}
某些情况下可以用PureComponent提升性能
如下显示的是一个IndexPage
组件,设置了一个state
是isShow
,通过一个按钮点击可以改变它的值,结果是:初始化的时候输出的是constructor
,render
,而第一次点击按钮,会输出一次render,即重新渲染了一次,界面也会从显示false
变成显示true
,但是当这个组件是继承自PureComponent
的时候,再点击的时,不会再输出render
,即不会再重新渲染了,而当这个组件是继承自Component
时,还是会输出render
,还是会重新渲染,这时候就是PureComponent
内部做了优化的体现。同理也适用于string
,number
等基本数据类型,因为基本数据类型,值改变了就算改变了
下面情况不适合使用PureComponent
状态是引用类型,并且setState时候并没有改变引用类型的地址。
import React, { PureComponent } from 'react';
class IndexPage extends PureComponent{
constructor() {
super();
this.state = {
isShow: false
};
console.log('constructor');
}
changeState = () => {
this.setState({
isShow: true
})
};
render() {
console.log('render');
return (
<div>
<button onClick={this.changeState}>点击</button>
<div>{this.state.isShow.toString()}</div>
</div>
);
}
}
但是当这个组件是继承自Component
的时候,初始化依旧是输出constructor
和render
,但是当点击按钮时,界面上出现了变化,即我们打印处理的arr
的值输出,而且每点击一次按钮都会输出一次render
,证明已经重新渲染,this.state.arr
的值已经更新,所以我们能在界面上看到这个变化
import React, { PureComponent, Component } from 'react';
class IndexPage extends Component{
constructor() {
super();
this.state = {
arr: [2,3,1]
};
console.log('constructor');
}
changeState = () => {
const { arr } = this.state;
arr.push(5)
this.setState({
arr
})
};xw
render() {
console.log('render');
const { arr } = this.state
return (
<div>
<button onClick={this.changeState}>点击</button>
{arr.map((item) => <p>{item}</p>)}
</div>
);
}
}
export default IndexPage
点击:
组件是继承自PureComponent
时,初始化依旧是输出constructor
和render
,但是当点击按钮时,界面上没有变化,也没有输出render
,证明没有渲染,但是我们可以从下面的注释中看到,每点击一次按钮,我们想要修改的arr
的值已经改变,而这个值将去修改this.state.arr
,但是因为在PureComponent
中浅比较
这个数组的引用没有变化所以没有渲染,this.state.arr
也没有更新,因为在this.setState()
以后,值是在render
的时候更新的。,点击页面没有反应:
class IndexPage extends PureComponent{
...
}
6。可以使用下面方式解决上面问题,扩展运算符
产生新数组,使this.state.arr
的引用发生了变化,所以初始化的时候输出constructor
和render
后,每次点击按钮都会输出render
,界面也会变化,不管该组件是继承自Component
还是PureComponent
的
import React, { PureComponent } from 'react';
class IndexPage extends PureComponent{
constructor() {
super();
this.state = {
arr:['1']
};
console.log('constructor');
}
changeState = () => {
let { arr } = this.state;
this.setState({
arr: [...arr, '2']
})
};
render() {
console.log('render');
return (
<div>
<button onClick={this.changeState}>点击</button>
<div>
{this.state.arr.map((item) => {
return item;
})}
</div>
</div>
);
}
}
7.上面的情况同样适用于对象
的情况
二.PureComponent不仅会影响本身,而且会影响子组件,所以PureComponent最佳情况是展示组件
1.我们让IndexPage
组件里面包含一个子组件Example
来展示PureComponent
是如何影响子组件的
2.父组件继承PureComponent
,子组件继承Component
时:下面的结果初始化时输出为constructor
,IndexPage render
,example render
,但是当我们点击按钮时,界面没有变化,因为这个this.state.person
对象的引用没有改变,只是改变了它里面的属性值所以尽管子组件是继承Component
的也没有办法渲染,因为父组件是PureComponent
,父组件根本没有渲染,所以子组件也不会渲染。
//父组件
import React, { PureComponent, Component } from 'react';
import Example from "../components/Example";
class IndexPage extends PureComponent{
constructor() {
super();
this.state = {
person: {
name: 'sxt'
}
};
console.log('constructor');
}
changeState = () => {
let { person } = this.state;
person.name = 'sxt2';
this.setState({
person
})
};
render() {
console.log('IndexPage render');
const { person } = this.state;
return (
<div>
<button onClick={this.changeState}>点击</button>
<Example person={person} />
</div>
);
}
}
//子组件
import React, { Component } from 'react';
class Example extends Component {
render() {
console.log('example render');
const { person } = this.props;
return(
<div>
{person.name}
</div>
);
}
}
3.父组件继承PureComponent
,子组件继承PureComponent
时:因为渲染在父组件的时候就没有进行,相当于被拦截了,所以子组件是PureComponent
还是Component
根本不会影响结果,界面依旧没有变化
4.父组件继承Component
,子组件继承PureComponent
时:结果和我们预期的一样,即初始化是会输出constructor
,IndexPage render
,example render
,但是点击的时候只会出现IndexPage render
,因为父组件是Component
,所以父组件会渲染,但是
当父组件把值传给子组件的时候,因为子组件是PureComponent
,所以它会对prop
进行浅比较,发现这个person
对象的引用没有发生变化,所以不会重新渲染,而界面显示是由子组件显示的,所以界面也不会变化
5.父组件继承Component
,子组件继承Component
时:初始化是会输出constructor
,IndexPage render
,example render
,当我们第一次点击按钮以后,界面发生变化,后面就不再改变,因为我们一直把它设置为sxt2,但是每点击一次都会输出IndexPage render
,example render
,因为每次不管父组件还是子组件都会渲染
所以,如果state
和prop
一直变化的话,还是建议使用Component
,并且PureComponent
的最好作为展示组件