在 React 的循环中向 JSX 元素添加键的不同方法

Question

我已经研究 react 一年多了。我主要使用 .map、.forEach、.filter 或使用 Object.keys 和 Object.values 迭代数组（如果它是一个对象）。

但是向 jsx 元素添加唯一键的不同方法是什么。以下是我到现在为止的习惯

使用数据中的唯一 id 作为 key 到 key prop：

const data= [{"id": "01", "name": "abc"}, {"id": "02", "name": "xyz"}];

render(){
  const items = data.map(item => {
    return <span key={item.id}>{item.name}</span>;
  }
  return(
     <div>
        {items}
     </div>
  )
}

使用索引作为 key 的 key 属性：

const data= [{"id": "01", "name": "abc"}, {"id": "02", "name": "xyz"}];

render(){
  const items = data.map((item, i) => {
    let keyValue = i+1;
    return <span key={keyValue}>{item.name}</span>;
  }
  return(
     <div>
        {items}
     </div>
  )
}

除了我上面提到的以及最有效和推荐的方法之外，还有其他方法可以为 jsx 元素添加唯一键吗？

Answer 1

您可以将 Date.now() 与 index 一起使用，您的代码将是 例如。

const data= [{"id": "01", "name": "abc"}, {"id": "02", "name": "xyz"}];

render(){
  const items = data.map((item, i) => {
    let keyValue = Date.now()+i;
    return <span key={keyValue}>{item.name}</span>;
  }
  return(
     <div>
        {items}
     </div>
  )
}

Answer 2

选择键的最佳方法是使用一个字符串，该字符串在其兄弟项中唯一标识一个列表项。大多数情况下，您会使用数据中的 ID 作为键：

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

当您没有稳定的渲染项目 ID 时，您可以使用项目索引作为键作为最后的手段：

const todoItems = todos.map((todo, index) =>
  // Only do this if items have no stable IDs
  <li key={index}>
    {todo.text}
  </li>
);

另请注意：

数组中使用的键在它们的兄弟中应该是唯一的。但是，它们不需要是全球唯一的。

您的问题的真正答案在这里： https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318

有许多库可以生成随机唯一 ID，例如 shortid 或 uuid（这是最流行的一种，只需查看下载次数），或者只需创建自己的生成随机字符串的函数。

您可以将它们直接添加到数组中的对象中

const todos = [
  { 
    id: uuid(),
    text: 'foo',
  }
]

然后像这样迭代：

const todoItems = todos.map(({id, text}) =>
  <li key={id}>
    {text}
  </li>
);

Answer 3

首先，避免使用随机键。

有很多方法可以编写密钥，有些会比其他的表现更好。

要了解我们选择的键如何影响性能，有必要了解 React 的协调算法。

https://reactjs.org/docs/reconciliation.html

tl;dr 引入了一种启发式方法来比较虚拟 DOM 树以进行此比较 O(n)，其中 n 个 VDOM 树的节点。这种启发式可以分为以下几点：

• 不同类型的组件将创建一棵新树：这意味着，在将旧树与新树进行比较时，如果协调器遇到一个节点确实改变了它的类型（例如 <Button /> 到 @987654323 @)，将导致我们的 Button 连同它的孩子一起被卸载，并且 NotButton 也和它的孩子一起被安装。
• 我们可以通过避免重新创建实例来提示 React 如何在 VDOM 上保存实例。这些提示由我们通过键提供。：在决定是否应保留节点中的实例后（因为其类型保持不变），协调器将迭代该节点的子节点以比较它们。

假设现在我们有这个：

<div>
  <Button title="One" />
  <Button title="Two" />
</div>

我们想在下一次渲染时向 DOM 添加一个 Button，比如说

<div>
  <Button title="Zero" />
  <Button title="One" />
  <Button title="Two" />
</div>

算法如下：

• 在两个 VDOM 中比较 <divs>。由于它们具有相同的类型，因此我们不需要重新创建新树。道具是相同的，因此此时无需对 DOM 进行任何更改。
• 按钮One 与Zero 进行比较。 Reconciler 检测到这是一个 props 更改，然后使用此标题更新 DOM。
• 按钮Two 与One 进行比较。 Reconcilier 还会在此处检测到 props 更改并使用 DOM 来编写此更改。
• 检测到新的Button 添加为最后一个子节点，因此在 VDOM 中创建一个新的 Button 实例并将此更改写入 DOM。

请注意，这些对 DOM 有很多操作，因为它通过索引比较组件。

现在，我们可以通过让协调器知道这些实例应该被重用来解决这个问题。现在，让我们来看看：

<div>
  <Button title="One" key="One" />
  <Button title="Two" key="Two" />
</div>

我们想在下一次渲染时向 DOM 添加一个 Button，比如说

<div>
  <Button title="Zero" key="Zero" />
  <Button title="One" key="One" />
  <Button title="Two" key"Two" />
</div>

算法如下：

• 在两个 VDOM 中比较 <divs>。由于它们具有相同的类型，因此我们不需要重新创建新树。道具是相同的，因此此时无需对 DOM 进行任何更改。
• 带孩子的第一个孩子。 “这是Button”，核对员说。 '并且有一把钥匙'（'一'）。然后，在新的孩子列表中寻找一个其键相同的孩子。 “哦，我遇到了！”但是协调器意识到 它的 props 没有变化。然后，这个就不需要 DOM 操作了。
• 第二个Button 会出现同样的情况，它将通过keys 而不是index 进行比较。意识到它是同一个实例并且没有更改任何 props，因此 React 决定不对 DOM 应用更改。
• 对于带有'Zero'键的Button，由于不存在具有相同键的子，意识到应该在VDOM上创建一个实例，并且这个更改应该写在DOM上.

因此，通过可预测的内容使用键有助于协调器对 DOM 执行更少的操作。健康的键是那些可以从被映射的对象中推断出来的键，比如name，或者id，如果我们将urls转换为<imgs />，甚至是url。

key=index 呢？不会有任何影响，因为默认情况下，reconciler 按位置进行比较，即它的索引。

这些键应该是全局唯一的吗？不必要。这些在兄弟节点中应该是唯一的，因此协调器可以在通过节点的子节点迭代时区分它们。

随机键呢？应该不惜一切代价避免这些。如果每次渲染都改变了一个键，这将导致 React 在 VDOM 上销毁和创建实例（因此，在 DOM 上进行额外的写入），因为在新子级中没有找到带有键的组件，而是一个新的同类型。

如果渲染输出是这样的

<div>
  <Button key={randomGenerator()} />
</div>

然后，每次执行 render 时（例如由于 props/state 更改，或者即使它的父级正在重新渲染并且我们的 shouldComponentUpdate 返回 true），一个新的 randomGenerator() 键将是生成。这将是这样的：

'嘿！我找到了带有F67BMkd== 键的Button，但在下一个中没有找到。我会删除它。 '哦！我遇到了带有SHDSA++5 键的Button！让我们创建一个新的'。

只要协调器告诉一个实例应该被删除和卸载，它的内部状态就会丢失；即使我们再次安装它。 在这种情况下，VDOM 上的实例将不会被保留。

Button 是一样的，但协调器在 DOM 上搞砸了。

希望对你有帮助。

Answer 4

md5 sha1 甚至 sha256 在内容上。