我的理解是PureComponent利用shouldComponentUpdate()方法,对状态和属性进行浅比较,但我创建了一个小例子,其操作方式与我的预期不同。
该示例应用程序显示人员列表。每个列表项都可以更改其名称。请尝试并检查此处的代码。
在父组件中,我有一个如下所示的方法:
该示例应用程序显示人员列表。每个列表项都可以更改其名称。请尝试并检查此处的代码。
在父组件中,我有一个如下所示的方法:
updateName(id, newName) {
const { people } = this.state
const idx = people.findIndex(person => person.id === id)
people[idx].name = newName
this.setState({ people })
}
我将要传回到 setState
的对象与之前的对象具有相同的引用。在这种情况下,如果进行浅比较,该组件不应更新,对吗?
其次,另一个不清楚的部分是,我将子组件 Person
从 PureComponent 更改为 Component,但仍然获得了只有更新的子组件重新渲染的好处(如果您想检查,我对每个子组件呈现都进行了控制台记录)。显然,这是React内部决定子组件是否应更新的事情,但我认为如果组件重新呈现,它会重新呈现所有内容。