2 回答

TA貢獻(xiàn)2065條經(jīng)驗(yàn) 獲得超14個(gè)贊
PureComponent 始終為您渲染,因?yàn)槟腜rops或State包含在父組件重新渲染期間在父組件中創(chuàng)建的任何對象或數(shù)組。
正如其他人所說,它對重新渲染進(jìn)行了淺層比較(意味著對象引用不會(huì)等于 NEW 對象引用,即使它們是 DEEP 相等),所以父組件是它的 PureComponent 子組件的瓶頸,因?yàn)槊看沃匦落秩径紩?huì)重新創(chuàng)建一個(gè)全新的對象引用
如果您真的想使用 PureComponent,則必須將組件中的所有其他道具簡化為基元或?qū)ο?數(shù)組,在每次重新渲染父級時(shí)都不會(huì)獲得新的引用
問題示例:
class Todo extends PureComponent {
render() {
return <div>this.props.foo</div>;
}
}
class MyTodoList extends Component {
render () {
const fooBar = {foo: 'bar'}
return <Todo fooBar={fooBar} />
}
}
修復(fù)示例:
class Todo extends PureComponent {
render() {
return <div>this.props.foo</div>;
}
}
class MyTodoList extends Component {
render () {
return <Todo fooBar={props.fooBar} />
}
}
可能您想要做的最好的事情就是盡可能高地將對象創(chuàng)建提升到不會(huì)重新渲染此類更改的組件,或者將每個(gè)單獨(dú)的道具簡化為非對象。

TA貢獻(xiàn)1810條經(jīng)驗(yàn) 獲得超5個(gè)贊
React.PureComponent 對它們的 props 和 state 進(jìn)行了淺層比較。因此更改 state 或 props 的 object 屬性不會(huì)重新渲染組件。只有當(dāng)利益的狀態(tài)或道具發(fā)生變化時(shí),我們才需要重建狀態(tài)或道具。例如,我們可以編寫如下代碼,僅在設(shè)置 forceRender 標(biāo)志時(shí)重新渲染。
class ShalloWCompareComponent extends React.PureComponent {
constructor() {
super();
this.state = {
userArray: [1, 2, 3, 4, 5]
}
}
update() {
const { forceRender } = this.props;
const { userArray } = this.state;
if (forceRender) {
this.setState({
userArray: [...userArray, 6]
});
} else {
this.setState({
userArray: userArray.push(6)
});
}
}
render() {
return <b>Array Length is: {this.state.userArray.length}</b>
}
}
如果該組件接收到 forceRender={false} 的 props,由于 React.PureComponent 的淺比較,調(diào)用 update() 不會(huì)重新渲染該組件。
添加回答
舉報(bào)