Question

我想了解如果我不在动态添加的组件中使用密钥会发生什么。我删除了密钥，它没有任何问题呈现，只是发出关于密钥使用的警告消息。如果我们不使用密钥，有人会举例说明后果是什么吗？

Answer 1

键帮助React识别哪些项目已更改，已添加或已删除。应该给出数组内部元素的键，以使元素具有稳定的标识：

示例：

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);

TL; DR在渲染动态子项时使用唯一和常量键，或者期望发生奇怪的事情。

我在使用React.js的几周内发现的一个棘手的方面是了解当一个组件属于子组件时，您希望传递给组件的关键属性。这不是你必须指定这个属性，除了在控制台上发出此警告之外，大部分时间都会有效：

数组中的每个子节点都应该有一个唯一的“键”支柱。检查undefined的render方法。   通过阅读链接的文档，很容易看不到这种肯定的含义：

当React协调键控子项时，它将确保任何具有键的子项将被重新排序（而不是被破坏）或被销毁（而不是重用）。   起初它在我看来这完全取决于表现，但正如Paul O'Shannessy指出的那样，它实际上是关于身份的。

这里的关键是要理解并非DOM中的所有内容都在React“Virtual DOM”中有表示，因为直接操作DOM（比如用户更改值或jQuery插件监听元素）都不会被React注意到，不使用唯一和常量键将最终React重新创建组件的DOM节点，当键不是常量（并在节点中丢失任何未跟踪状态）或重用DOM节点时，当键不是唯一的时，呈现另一个组件（并将其状态与其他组件联系起来）。

这里有一个现场演示，展示了结果有多糟糕：

http://jsfiddle.net/frosas/S4Dju/

只需添加项目，更改项目，添加更多项目，看看会发生什么。

另外see

Source

Answer 2

React键除了创建动态元素外，另一个有用的用法是在其键更改时重置元素，例如，在项目中，我有一个<input/>类型的file元素，并且我希望该元素为每次组件渲染时都初始化为其初始值（未选择文件），所以我执行了以下操作：

父构造函数：

this.state = {
    fileInputKey: Date.now()
    // other properties
};

state对象还具有其他属性，为了这个示例，我刚刚添加了该属性

每次我希望重置子组件中的input元素时，我都会这样做：

this.setState({fileInputKey: Date.now()});

父渲染：

<Child fileInputKey={this.state.fileInputKey}/>

儿童渲染：

<input key={this.props.fileInputKey} type="file" onChange={this.onSelectFile}/>

也可以从React博客中看到以下示例： https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key

ReactJS中键的重要性是什么？

2 个答案: