javascript - React 中的嵌套键属性要求

Question

我理解在使用组件数组时，key 属性被假定为数组的索引，并且应该明确设置。是否建议明确设置那些 child 的 child ？

{arr.map(item, i) => {
  <Parent
    key={item.ID}
  >
    <Child
      key={`child${item.ID`}   //required to ensure correct reconciliation?
    />
  </Parent>
}

Answer 1

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity (source)

key 的一般目的是优化 React 的渲染性能。如果你有一个项目列表，给一个键告诉 React 如何记住这个项目以供后续渲染。如果您使用数组索引，则可能会破坏 key 的目的(如果这些元素的顺序发生变化)。 Its better to use a unique ID or something more specific to the entity being rendered .

有了这个上下文，父元素就是需要键的元素，因此 React 可以进行优化。该“动态”元素的子元素附加到该父元素/它的键，因此无需在子元素上应用 key。只是在循环中呈现的 parent :)