它們幾乎完全相同，但是PureComponent通過prop和state的淺比較來實現(xiàn)shouldComponentUpdate，某些情況下可以用PureComponent提升性能
淺比較(shallowEqual)，即react源碼中的一個函數(shù)，然后根據(jù)下面的方法進(jìn)行是不是PureComponent的判斷，幫我們做了本來應(yīng)該我們在shouldComponentUpdate中做的事情
if (this._compositeType === CompositeTypes.PureClass) {
shouldUpdate = !shallowEqual(prevProps, nextProps) || ! shallowEqual(inst.state, nextState);
}
哪些情況下可以使用PureComponent來提升性能？
栗子1：
如下顯示的是一個IndexPage組件，設(shè)置了一個state是isShow，通過一個按鈕點擊可以改變它的值，結(jié)果是：初始化的時候輸出的是constructor，render，而第一次點擊按鈕，會輸出一次render，即重新渲染了一次，界面也會從顯示false變成顯示true，但是當(dāng)這個組件是繼承自PureComponent的時候，再點擊的時，不會再輸出render，即不會再重新渲染了，而當(dāng)這個組件是繼承自Component時，還是會輸出render，還是會重新渲染，這時候就是PureComponent內(nèi)部做了優(yōu)化的體現(xiàn)，同理也適用于string，number等基本數(shù)據(jù)類型，因為基本數(shù)據(jù)類型，值改變了就算改變了。
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>
);
}
}
栗子2：
- 當(dāng)這個this.state.arr是一個數(shù)組時，且這個組件是繼承自PureComponent時，初始化依舊是輸出constructor和render，但是當(dāng)點擊按鈕時，界面上沒有變化，也沒有輸出render，證明沒有渲染，但是我們可以從下面的注釋中看到，每點擊一次按鈕，我們想要修改的arr的值已經(jīng)改變，而這個值將去修改this.state.arr,但是因為在PureComponent中淺比較這個數(shù)組的引用沒有變化所以沒有渲染，但是實際上this.state.arr已經(jīng)更新了，只是沒有渲染，表現(xiàn)出來給用戶看到，這里涉及到this.setState()的知識。
- 但是當(dāng)這個組件是繼承自Component的時候，初始化依舊是輸出constructor和render，但是當(dāng)點擊按鈕時，界面上出現(xiàn)了變化，即我們打印處理的arr的值輸出，而且每點擊一次按鈕都會輸出一次render，證明已經(jīng)重新渲染，this.state.arr的值已經(jīng)更新，所以我們能在界面上看到這個變化
- 使用擴(kuò)展運算符產(chǎn)生新數(shù)組，使this.state.arr的引用發(fā)生了變化，所以初始化的時候輸出constructor和render后，每次點擊按鈕都會輸出render，界面也會變化，不管該組件是繼承自Component還是PureComponent的
class IndexPage extends PureComponent {
constructor() {
super();
this.state = {
arr: ['1'],
obj: {
name: "zlq"
}
};
console.log('constructor');
}
//PureComponent中頁面會警告,不建議在PureComponent中使用
// shouldComponentUpdate(){
// return false;
// }
changeState = () => {
let { arr } = this.state;
arr.push('2')
var obj = {
name: "zl"
}
this.setState({
// obj
// obj:{name:"Z"}
arr // pureComponent下不會重新render
// arr: [...arr, '2']
})
};
render() {
console.log('render');
let { arr, obj } = this.state
return (
<div>
<button onClick={this.changeState}>點擊</button>
<div>
{arr.map((item) => {
return item;
})}
{obj.name}
</div>
</div>
);
}
}
export default IndexPage;
上面的情況同樣適用于對象的情況，引用數(shù)據(jù)類型
PureComponent不僅會影響本身，而且會影響子組件，所以PureComponent最佳情況是展示組件
栗子3：
//父組件
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>
);
}
}
1.我們讓IndexPage組件里面包含一個子組件Example來展示PureComponent是如何影響子組件的
2.父組件繼承PureComponent，子組件繼承Component時：下面的結(jié)果初始化時輸出為constructor，IndexPage render，example render，但是當(dāng)我們點擊按鈕時，界面沒有變化，因為這個this.state.person對象的引用沒有改變，只是改變了它里面的屬性值所以盡管子組件是繼承Component的也沒有辦法渲染，因為父組件是PureComponent，父組件根本沒有渲染，所以子組件也不會渲染
3.父組件繼承PureComponent，子組件繼承PureComponent時：因為渲染在父組件的時候就沒有進(jìn)行，相當(dāng)于被攔截了，所以子組件是PureComponent還是Component根本不會影響結(jié)果，界面依舊沒有變化
4.父組件繼承Component，子組件繼承PureComponent時：結(jié)果和我們預(yù)期的一樣，即初始化是會輸出constructor，IndexPage render，example render，但是點擊的時候只會出現(xiàn)IndexPage render，因為父組件是Component，所以父組件會渲染，但是當(dāng)父組件把值傳給子組件的時候，因為子組件是PureComponent，所以它會對prop進(jìn)行淺比較，發(fā)現(xiàn)這個person對象的引用沒有發(fā)生變化，所以不會重新渲染，而界面顯示是由子組件顯示的，所以界面也不會變化
5.父組件繼承Component，子組件繼承Component時：初始化是會輸出constructor，IndexPage render，example render，當(dāng)我們第一次點擊按鈕以后，界面發(fā)生變化，后面就不再改變，因為我們一直把它設(shè)置為sxt2，但是每點擊一次都會輸出IndexPage render，example render，因為每次不管父組件還是子組件都會渲染
6.所以正如下面第四條說的，如果state和prop一直變化的話，還是建議使用Component，并且PureComponent的最好作為展示組件
若是數(shù)組和對象等引用類型，則要引用不同，才會渲染
如果prop和state每次都會變，那么PureComponent的效率還不如Component，因為你知道的，進(jìn)行淺比較也是需要時間
若有shouldComponentUpdate，則執(zhí)行它，若沒有這個方法會判斷是不是PureComponent，若是，進(jìn)行淺比較
繼承自Component的組件，若是shouldComponentUpdate返回false，就不會渲染了，繼承自PureComponent的組件不用我們手動去判斷prop和state，所以在PureComponent中使用shouldComponentUpdate會有如下警告:
IndexPage has a method called shouldComponentUpdate(). shouldComponentUpdate should not be used when extending React.PureComponent. Please extend React.Component if shouldComponentUpdate is used.
參考博客：http://www.itdecent.cn/p/c41bbbc20e65
https://segmentfault.com/a/1190000014979065?utm_source=tag-newest
