我当前在我的应用程序中使用PureComponent父级和子级组件。我希望PureComponent仅在状态或道具更改时才会更新。为了确保这一点,每次调用componentDidUpdate()方法时,我都会有一个子组件日志。该应用程序看起来像这样:
class Parent extends React.PureComponent{
constructor(props){
super(props);
this.state = {
item1: null,
item2: null,
list1: [],
list2: [],
}
render(){
let combinedList= [...this.state.list1, ...this.state.list2];
return(
<React.Fragment>
<Child myList={combinedList} />
<OtherChild item={this.state.item1} />
</React.Fragment>
);
Child组件看起来像这样:
class Child extends React.PureComponent{
constructor(props){
super(props);
}
componentDidUpdate(){
console.log("Child updated");
}
render(){
return(
....
);
}
例如,当父组件中item2的状态发生变化时,子组件将记录“已更新子组件”。我有点困惑,因为子组件没有收到item1作为道具,并且它的状态没有改变。这是因为“父级”组件放弃了所有子级吗?或者,也许是因为Child对myList
道具所做的浅表比较表明它已经改变了?除了编写自己的shouldComponentUpdate()
方法之外,如何防止Child在每次Parent重新渲染时重新渲染?
答案 0 :(得分:5)
现在,在render
组件的Parent
函数中,您正在使用combinedList
在每个渲染上创建一个新的Array。 PureComponent切换您的shouldComponentUpdate()
方法以进行浅表比较,以查看是否应更新。由于它很浅,所以它正在比较参考。
由于您要在每个渲染上创建一个新数组,因此每次Parent
渲染都将是一个新数组。
这里的解决方案实际上取决于combinedList
的完整用例。直接看此示例,我建议您将combinedList
设置为state。另一种选择是将您的子组件props拆分为list1
和list2
prop,而不是myList
prop。