Question

这是一个非常简单的问题，我是一个绝对的初学者，我在文档中找不到答案，所以我来这里寻求帮助。

如果React需要每个列表项的键以进行标识并在需要时进行更改，为什么它只限于li？

说我有一个这样的结构：

        <div>
            <div>Div 1</div>
            <div>Div 2</div>
            <div>Div 3</div>
            <div>Div 4</div>
        </div>

不应该为每个div元素提供键，以便它可以更快地识别和呈现更改吗？

Answer 1

React中键的使用不仅限于li元素，还包括在迭代器中动态呈现的任何JSX元素。对于静态JSX内容，不需要密钥。

例如，当您渲染像这样的元素

时

 <div>
        <div>Div 1</div>
        <div>Div 2</div>
        <div>Div 3</div>
        <div>Div 4</div>
 </div>

您需要指定div的键，因为在创建虚拟DOM时，reaction知道哪些元素定义在哪里，哪些元素在更新期间进行比较。即使使用条件渲染进行渲染，静态内容也将始终遵循相同的顺序，并保证如果您遵循正确的模式，则不会从dom中随机删除或在dom中重新排序，因此React可以依靠虚拟DOM首次生成了用于比较元素的

。

但是，当使用迭代器渲染元素时，可能会更改数据的顺序，添加一些数据甚至删除一些数据，这将导致渲染的JSX元素数量发生变化或渲染顺序。在这种情况下，react需要知道在连续渲染期间要比较哪些元素。因此，您需要一个钥匙

这种情况的一个例子是

state = {
   data: [1,2,3,4]
}
<div>
     {this.state.map(value => {
          return <div key={value}>Div {value}</div>
     })}
 </div>

在上述情况下，您可能决定按降序对数据进行排序，因此元素将呈现为

    <div>Div 4</div>
    <div>Div 3</div>
    <div>Div 2</div>
    <div>Div 1</div>

，如果提供了返回的元素，则键的响应将知道要比较的元素，因此不会导致完整的渲染。

在React

1 个答案: