React.Component和 React.PureComponent
在開發(fā)的時(shí)候，偶然看到別人的代碼使用了 React.PureComponent進(jìn)行繼承徘郭，我也跟著復(fù)制粘貼来庭，但是并不知道他到底有什么作用妒蔚，于是下來去了解了一下他兩的區(qū)別，總結(jié)一下月弛。
PureComponent使用淺比較的方式對比props和state肴盏，實(shí)現(xiàn)了shouldComponentUpdate()函數(shù)，在某些情況下帽衙，使用PureComponent可以減少render函數(shù)的執(zhí)行菜皂，提升性能。
- 組件繼承component：
export default class Page extends React.Component{
constructor(props) {
super(props);
this.state = {
isShow:false,
};
console.log('1');
}
componentDidUpdate() {
console.log("componentDidUpdate")
}
@Bind()
onClick() {
this.setState({
isShow: true,
});
};
render() {
console.log('2');
return (
<div>
<button onClick={this.onClick}>點(diǎn)擊</button>
<div>
{this.state.isShow.toString()}
</div>
</div>
);
}
}
在首次渲染頁面的時(shí)候厉萝，依次打踊衅：'1', '2',當(dāng)?shù)谝淮吸c(diǎn)擊按鈕之后，打印'2', 'componentDidUpdate',在每次點(diǎn)擊按鈕之后谴垫，都會(huì)打印'2', 'componentDidUpdate'章母，說明每點(diǎn)擊一次，雖然state中的值沒有改變翩剪，都會(huì)調(diào)用render()和componentDidUpdate()方法乳怎，觸發(fā)頁面的重新渲染，通常情況下需要我們重新手動(dòng)調(diào)用shouldComponentUpdate()來判斷state的值是否有改變前弯，來決定頁面是否重新渲染舞肆。
因此，繼承自Component中的組件shouldComponentUpdate()默認(rèn)情況下總是返回true博杖，總是會(huì)觸發(fā)頁面的重新渲染椿胯。
- 組件繼承pureComponent：
export default class Page extends React.PureComponent{
constructor(props) {
super(props);
this.state = {
isShow:false,
};
console.log('1');
}
componentDidUpdate() {
console.log("componentDidUpdate")
}
@Bind()
onClick() {
this.setState({
isShow: true,
});
};
render() {
console.log('2');
return (
<div>
<button onClick={this.onClick}>點(diǎn)擊</button>
<div>
{this.state.isShow.toString()}
</div>
</div>
);
}
}
在首次渲染頁面的時(shí)候，依次打犹旮：'1', '2',當(dāng)?shù)谝淮吸c(diǎn)擊按鈕之后哩盲，打印'2', 'componentDidUpdate',在每次點(diǎn)擊按鈕之后，沒有輸出。在purComponent源碼中：
// 這個(gè)變量用來控制組件是否需要更新
var shouldUpdate = true;
// inst 是組件實(shí)例
if (inst.shouldComponentUpdate) {
shouldUpdate = inst.shouldComponentUpdate(nextProps, nextState, nextContext);
} else {
if (this._compositeType === CompositeType.PureClass) {
shouldUpdate = !shallowEqual(prevProps, nextProps) ||
!shallowEqual(inst.state, nextState);
}
}
判斷新舊屬性和狀態(tài)是否相等廉油，是否需要重新渲染子組件惠险，減少render()方法的觸發(fā)，節(jié)省了在虛擬DOM生成與對比的過程抒线，性能得到提升班巩。
PureComponent默認(rèn)實(shí)現(xiàn)的shouldComponentUpdate()方法使用的是淺比較：即值的比較或引用的比較, 不會(huì)進(jìn)行深層次的對比，所以當(dāng)props或state的值是引用類型時(shí)嘶炭，即使對象的值改變了抱慌，但是對象的引用沒變。
export default class Page extends React.PureComponent{
constructor(props) {
super(props);
this.state = {
isShow: [1,2],
};
console.log('1');
}
componentDidUpdate() {
console.log("componentDidUpdate")
}
@Bind()
onClick() {
const { isShow } = this.state;
isShow.push(1);
this.setState({
isShow,
});
console.log(this.state.isShow);
};
render() {
console.log(this.state.isShow);
return (
<div>
<button onClick={this.onClick}>點(diǎn)擊</button>
{
arr.map(item => <span key={item}>{item}</span>)
}
</div>
);
}
}
在上面這段代碼中眨猎，初次渲染打印'1',[1,2],點(diǎn)擊按鈕之后抑进，打印出[1,2]，render()函數(shù)沒有執(zhí)行睡陪，頁面上展示的只有1 2寺渗。
總結(jié)
- PureComponent已經(jīng)用淺層對比props、state的方式替我們實(shí)現(xiàn)了shouldComponentUpdate()兰迫， 不僅能影響自身信殊，還會(huì)影響其子組件；
- PureComponent 某些情況下（props或state的值不經(jīng)常變動(dòng)汁果， 因?yàn)闇\比較也會(huì)耗時(shí)）可以提升性能涡拘；
遺留問題
PureComponent只是進(jìn)行淺比較，無法判斷復(fù)雜數(shù)據(jù)類型（引用類型）的變化须鼎，還需要下來進(jìn)行深入的研究鲸伴。
