为什么不能用索引作为 key？React 列表渲染的底层机制揭秘

今禾
81 阅读8分钟

🧠 React 中的 key 究竟是什么？

在 React 中，当你使用 .map() 方法渲染一个列表时，每个元素都必须拥有一个唯一的 key 属性。这个属性不仅仅是一个简单的标识符，它实际上对于 React 组件如何高效地进行状态管理、性能优化有着至关重要的作用。

<ul>
  {
    todos.map((todo) => (
      <li key={todo.id}>{todo.title}</li>
    ))
  }
</ul>

🔍 key 的核心作用

  • 帮助 React 进行高效的 DOM 操作：React 使用虚拟 DOM 来提高应用性能。当组件的状态发生变化时，React 会计算出需要对实际 DOM 进行哪些修改。为了做到这一点，React 需要一种方式来追踪每个节点的变化，这就是 key 的作用所在。
  • 避免不必要的重新渲染：如果使用不稳定的 key（例如数组的索引），可能会导致 React 错误地认为某些节点发生了变化，从而触发不必要的重新渲染操作，这不仅浪费了资源，还可能影响用户体验。

📌 key 如何工作？

React 使用了一种称为“Diffing”的算法来高效地更新 UI。每当组件的状态发生改变时，React 会比较新旧虚拟 DOM 树之间的差异，并尽可能少地更新实际的 DOM。为了做到这一点，React 需要能够快速判断哪些部分改变了。这里就体现了 key 的价值：通过提供稳定的标识符，React 可以更准确地定位到具体的元素，从而提高 diff 算法的效率。

🔑 为什么不能用索引作为 key？

虽然使用数组项的索引作为 key 是一种简单的方法，但它并不总是最佳选择。特别是在以下情况下：

  • 动态添加或删除列表项：如果你向列表的开头添加一个新的项目，或者从中间删除一个项目，所有后续项目的索引都会发生变化。这意味着即使它们的内容没有改变，React 也会认为这些节点已经被替换，并尝试重新渲染它们。
  • 排序变动：当列表中的元素顺序发生改变时，基于索引的 key 会导致大量的无效重渲染。

因此，推荐的做法是为每个列表项提供一个稳定且唯一的 key，通常可以使用数据库生成的 ID 或其他能够保证唯一性的属性。

示例分析：

考虑以下代码段：

useEffect(() => {
  setTimeout(() => {
    setTodos(prev => [
      {
        id: 4,
        title: '标题四'
      },
      ...prev
    ]);
  }, 3000);
}, []);

在这段代码中，我们在等待三秒后向 todos 列表的开头添加了一个新的项目。由于我们为每个 todo 对象提供了唯一的 id 作为 key，React 能够有效地管理这个更新过程，确保只有必要的部分得到重新渲染。如果使用索引作为 key，则可能导致整个列表被重新渲染，极大地降低了性能。

🧱 Diff 算法与 key 的关系

React 使用了一种称为“Diffing”的算法来高效地更新 UI。每当组件的状态发生改变时，React 会比较新旧虚拟 DOM 树之间的差异，并尽可能少地更新实际的 DOM。为了做到这一点，React 需要能够快速判断哪些部分改变了。这里就体现了 key 的价值：通过提供稳定的标识符，React 可以更准确地定位到具体的元素，从而提高 diff 算法的效率。

✅ Diff 算法的工作流程

  1. 创建新虚拟 DOM 树：每当状态更新时，React 会根据新的状态创建一个新的虚拟 DOM 树。
  2. 比较新旧虚拟 DOM 树：React 会逐个比较新旧树的节点，找出差异。
  3. 应用差异到真实 DOM：一旦确定了需要更新的部分，React 会将这些差异应用到真实 DOM 上，从而实现最小化更新。

在这个过程中，key 提供了节点的身份信息，使得 React 能够快速识别出哪些节点已经存在，哪些节点是新增的，以及哪些节点需要被移除或更新。

实例讲解：

在我们深入分析代码示例之前，先了解一下 .map() 方法的使用，方便我们更好的理解

.map() 方法介绍及其底层逻辑

.map() 是 JavaScript 数组的一个高阶函数，用于遍历数组并返回一个新的数组。它的基本语法如下：

const newArray = array.map(function(item, index, array) {
  // 返回一个新的元素
});

在 React 中，我们经常使用 .map() 来渲染列表。例如：

<ul>
  {todos.map(todo => (
    <li key={todo.id}>{todo.title}</li>
  ))}
</ul>

.map() 底层机制

  • 回调函数执行：每次调用 .map() 时，JavaScript 引擎会遍历数组中的每一个元素，并对其执行指定的回调函数。回调函数接收三个参数：当前元素、当前元素的索引和数组本身。
  • 不可变数据结构：.map() 不会修改原始数组，而是返回一个新的数组。这种特性符合 React 中的不可变数据原则，即不应直接修改原状态，而是应返回一个新的状态对象。这对于 React 的状态管理和性能优化至关重要。
  • 内部实现细节：.map() 的实现依赖于引擎的内部循环机制。它不会跳过稀疏数组中的空位，但会处理未定义的值。这意味着，如果数组中有空位，.map() 将会在结果数组中保留这些位置为空。

结合 key 使用

在上述例子中，我们为每个 <li> 元素设置了 key 属性，值为 todo.id。这样做是为了让 React 在更新时能够正确地识别每个列表项，避免不必要的重新渲染。

{todos.map(todo => (
  <li key={todo.id}>{todo.title}</li>
))}

代码分析：

import { useState, useEffect } from 'react';

function App() {
  const [todos, setTodos] = useState([
    { id: 1, title: '标题一' },
    { id: 2, title: '标题二' },
    { id: 3, title: '标题三' }
  ]);

  useEffect(() => {
    setTimeout(() => {
      // 插入新 todo 到开头
      setTodos(prev => [
        { id: 4, title: '标题四' },
        ...prev
      ]);
    }, 3000);
  }, []);

  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
}

关键点总结：

  • 初始化 State：

    • 使用 useState Hook 初始化一个 todos 状态，包含三个待办事项对象，每个对象都有一个唯一的 id 和一个 title。

  • 使用 useEffect 进行副作用操作：

    • useEffect 在组件挂载完成后执行一次，模拟了三秒钟后向 todos 数组头部插入一个新的待办事项的行为。
    • setTimeout 函数延迟执行 setTodos，该函数接收一个回调函数，返回一个新的 todos 数组，其中第一个元素是新插入的待办事项 { id: 4, title: '标题四' }，后面跟随的是原来的 todos 数组。

  • 渲染列表：

    • todos.map() 遍历 todos 数组，并为每个 todo 创建一个 <li> 元素。注意，这里为每个 <li> 元素设置了 key 属性，值为 todo.id。这样做是为了让 React 在更新时能够正确地识别每个列表项，避免不必要的重新渲染。

.map() 与 React 渲染的最佳实践

  • 为每个列表项设置唯一的 key：这是 React 渲染列表的最佳实践之一，确保 React 可以高效地追踪和更新列表项。
  • 利用 .map() 实现不可变更新：通过返回新数组而不是直接修改原数组，可以确保 React 正确识别状态的变化，从而触发必要的重新渲染。

🚀 实践中的 key 应用场景

✅ 列表渲染的最佳实践

在处理动态列表时，始终为每个列表项分配一个唯一的 key。这样做不仅可以帮助 React 更好地管理状态，还能提高应用的整体性能。

{todos.map(todo => (
  <li key={todo.id}>{todo.title}</li>
))}

✅ 动态表单字段管理

当你需要动态地增加或移除表单项时，给每个表单项设置一个唯一的 key 可以确保 React 正确地跟踪和管理这些字段的状态。

✅ 组件切换时保留状态

有时候我们需要根据不同的条件显示不同的组件。在这种情况下，可以通过改变 key 来强制 React 卸载并重新创建组件实例，这样就可以清除组件的状态。

{activeTab === 'form' && <FormComponent key="form" />}
{activeTab === 'preview' && <PreviewComponent key="preview" />}

📊 示例分析

让我们回到文章开始的例子：

function App() {
  const [todos, setTodos] = useState([
    { id: 1, title: '标题一' },
    { id: 2, title: '标题二' },
    { id: 3, title: '标题三' }
  ]);

  useEffect(() => {
    setTimeout(() => {
      // 插入新 todo 到开头
      setTodos(prev => [
        { id: 4, title: '标题四' },
        ...prev
      ]);
    }, 3000);
  }, []);

  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
}

在这个例子中，我们演示了如何正确使用 key 来优化 React 应用的性能。通过为每个 todo 对象提供一个稳定的 id 作为 key，我们可以确保 React 在处理列表更新时只做必要的工作，而不是每次都重新渲染整个列表。

📌 总结

key 是 React 中一个非常重要的概念，它直接影响组件的更新效率和状态管理。使用唯一 ID 作为 key 是最佳实践，可以避免因索引不稳定导致的性能问题。

通过理解 React 的 diff 算法和 key 的作用机制，以及深入了解 .map() 方法的底层逻辑，我们可以写出更高效、更稳定的 React 应用程序。希望这篇文章能帮助你更好地掌握 key 的使用技巧，并将其应用于你的日常开发工作中。

通过上述详细的解释，希望能够让你更加深刻地理解 key 在 React 中的重要性以及它的具体应用场景。如果你有任何疑问或想要分享的经验，请随时留言交流！

avatar
文章
阅读
粉丝