React 组件的 Key 应该有多独特？答案

【问题标题】：How unique should a React component Key be?React 组件的 Key 应该有多独特？
【发布时间】：2015-10-30 05:00:11
【问题描述】：

这是一个快速的问题：子键必须唯一的范围是什么？这只是父组件还是整个应用程序？

如果后者为真，是否意味着 react diff 算法会在元素跨父组件移动时保留元素？

【问题讨论】：

在兄弟姐妹中必须是唯一的。

标签： javascript reactjs

【解决方案1】：

在其兄弟中是唯一的，因此直接在其父级之下。然而，父组件的子组件可以再次使用相同的密钥，因为最后，react 将由当前组件的密钥及其所有祖先组成完整的密钥。下面的示例仅包含自动生成的密钥，但如果您提供自己的密钥，则会使用它来代替。

您可以在 Chrome 开发者工具（标签元素）中查看组合 ID。

【讨论】：

酷，有道理，所以回答第二个问题，将一个组件移动到另一个父级使其成为 React 完全不同的元素，它将从头开始重新创建，对吗？

【解决方案2】：

是的，看起来像...如果你重新设置它，它会给出不同的 reactid（例如http://webcloud.se/react-sortable/nested.html）

并将再次卸载/重新安装。 ...

http://jsfiddle.net/46x0j6uq/1/

,componentWillUnmount: function() {
 //console.log("unmounted:", this.props);
 clearInterval(this.state.intervalId);
 clearTimeout(this.state.timeoutId);
}
,componentDidMount: function(){
  // console.log("mounted:", this.props);
  this.state.intervalId = setInterval(this.incrementCount, 1000);
 this.state.timeoutId = setTimeout(this.setColorToBlack, 300);
}

因此，最好不要将状态存储在视图组件本身中，因为它可能会自行重置。上面的提琴只是一个演示来证明一个观点。

我确实希望 React 可以考虑超出同一级别的范围/嵌套键状态，但我想再次卸载/重新安装的性能应该不会太有害。

【讨论】：