React组件Key应该有多独特？

Question

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

如果后者为真，那么它是否意味着反应差异算法会在元素移动时保留一个元素？

Answer 1

在其兄弟姐妹中独一无二，所以直接在其父母之下。然而，父组件的子组可以再次使用相同的键，因为最终，react将组成当前组件及其所有祖先的键中的完整键。下面的示例仅包含自动生成的密钥，但如果您提供自己的密钥，则会使用它。

您可以在Chrome开发者工具中找到合成ID（标签元素）。

Answer 2

是的，看起来像......如果你重新加入它，它会给出不同的反应（例如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);
}

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

其他相关链接： Using keys to identify nested components in React.js

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