ReactJS中键的重要性是什么？

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注意到,而不是使用当密钥不是常量(并且在节点中丢失任何未跟踪的状态)或者当密钥不是唯一的时候重新使用DOM节点来渲染另一个组件时,唯一和常量键将最终重新创建组件的DOM节点(并且绑定)它对其他组成部分的状态).

在这里,您有一个现场演示,显示结果有多糟糕:

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

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

另见

资源

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-probously-dont-need-driven-state.html#recommendation-filled-uncontrol-component-with-a-钥匙