为什么我的 React 组件列表在使用 Index 作为关键道具时不会搞砸?



我在网上找到了一些信息,这是说你不应该在使用地图时使用index参数作为key道具。例如:

{myPersonsState.map( (person, index) => {
return <Person key={index} />
})

根据我的发现,这是而不是好。

这样做的原因是,每当您在状态下操作数据时(例如,删除数组中的第三个元素),每个元素的键,从第3个位置开始,一定会更改,因为每个元素的键是它的索引(这肯定会改变),并且React会将新元素的键视为旧的键(在更改之前)。

根据这个逻辑,唯一合乎逻辑的是React会从第3个位置开始接受新元素,并给它们旧的键,这将认为它们是旧的-这将导致React认为它不需要创建它们的新实例,只需要使用以前的元素数据来创建它们。

那么,为什么我在实际操作状态和重新渲染时看不到呢?

为什么React知道它自己是一个新元素,即使它有另一个元素的前一个键?

React的key prop让你能够控制组件实例。每次React呈现组件时,它都会调用函数来检索用于更新DOM的新React元素。如果你返回相同的元素类型,它会保留那些组件/DOM节点,即使所有的*道具都改变了。

Key prop允许您返回完全相同的元素类型,但强制React卸载前一个实例,并安装一个新的。这意味着组件中当时存在的所有状态都被完全删除,组件被"重新初始化"。不管怎么说。对于组件,这意味着React将在效果上运行清理(或componentWillUnmount),然后运行状态初始化器(或构造函数)和效果回调(或componentDidMount)。

相关内容

最新更新