ReactJS 中键的意义是什么？答案

【问题标题】：What is the significance of keys in ReactJS?ReactJS 中键的意义是什么？
【发布时间】：2017-03-15 04:52:10
【问题描述】：

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

【问题讨论】：

Understanding unique keys for array children in React.js的可能重复

【解决方案1】：

键帮助 React 识别哪些项目已更改、添加或删除。应为数组内的元素赋予键，以赋予元素稳定的身份：

例子：

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

TL;DR 在渲染动态子项时使用唯一且恒定的键，否则会发生奇怪的事情。

在我使用 React.js 的几周中，我发现其中一个棘手的方面是要了解当组件是子数组的一部分时，您应该传递给组件的关键属性。不是你必须指定这个属性，除了在控制台上得到这个警告之外，大部分时间都可以正常工作：

数组中的每个孩子都应该有一个唯一的“key”道具。检查未定义的渲染方法。通过阅读链接的文档，很容易看不到这个肯定的含义：

当 React 协调键控子级时，它将确保任何具有键的子级都将被重新排序（而不是破坏）或销毁（而不是重用）。起初在我看来，这一切都与性能有关，但正如 Paul O'Shannessy 指出的那样，它实际上与身份有关。

这里的关键是要理解并非 DOM 中的所有内容都在 React“虚拟 DOM”中具有表示形式，并且因为对 DOM 的直接操作（例如用户更改值或 jQuery 插件侦听元素）不会被 React 注意到, 不使用唯一和常量键将导致 React 在键不恒定时重新创建组件的 DOM 节点（并丢失节点中的任何未跟踪状态）或在键不唯一时重用 DOM 节点来渲染另一个组件（并将其状态绑定到其他组件）。

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

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

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

还有see

Source

【讨论】：

这并没有说明为什么有时使用增量数字作为键是错误的，以及在什么情况下会失败
你应该引用来源。
@SurajJain 检查最后一行。
@NevinMadhukarK 看到我的编辑，这就是你应该做的。下次记住。
是否有相同的stackoverflow规则？ @SurajJain

【解决方案2】：

除了创建动态元素之外，React 键的另一个有用用法是在元素的键更改时重置元素，例如在一个项目中，我有一个 file 类型的 <input/> 元素，我希望将元素初始化为其初始值值（没有选择文件）每次组件呈现，所以我做了以下：

父构造函数：

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

【讨论】：