React Warning :你需要了解 “key” 属性的一切

React 2年前 42

在 React 中渲染组件列表或序列的常见做法是使用 map ：

const List = () => {
    const listItems = ['Item 1', 'Item 2', 'Item 3'];
    return (
        <ul>
            {listItems.map(item) => <li>{item}</li>}
        </ul>
    );
}

好吧，我们现在看到了我们的项目列表，但是我们在浏览器的控制台中看到了警告

React Warning :你需要了解 “key” 属性的一切

好吧，看来我们需要为每个子元素传递一个特殊的唯一键属性。好的，我们知道 Array 的 map 方法在其回调中接受 index 参数。因此，我们可以简单地执行以下操作来使其不再有警告。

const List = () => {
    const listItems = ['Item 1', 'Item 2', 'Item 3'];
    return (
        <ul>
            {listItems.map((item, index)) => <li key={index}>{item}</li>}
        </ul>
    );
}

警告现在消失了。但这是正确的解决方案吗？（剧透：答案是否定的）。让我们讨论一下为什么，如何正确处理 key 属性。

一切都是为了优化

React 是一个强大的 JavaScript 库，用于构建用户界面。 React 本身有很多优化技术，包括 Virtual DOM。

每次更改视图时，Virtual DOM 都会将以前版本的 DOM 表示形式与新版本进行比较。这个过程称为“差异化”。根据 React 文档，该算法基于两个假设：

两种不同类型的元素会产生不同的树。
开发人员可以使用 key prop 提示哪些子元素在不同的渲染中可能是稳定的。

我将跳过 diffing 算法如何处理不同类型的元素，现在，让我们专注于我们的 key。

假设我们是具有特殊比较算法的机器，我们需要比较两个 UI 状态，找出差异并仅更新那些不同的部分：

旧版 UI

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

新版 UI

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

嗯，很简单，对吧？我们比较两个 <li>Item 1</li> 树和两个 <li>Item 2</li> 树。这是一场比赛，所以我们在这里不需要任何更新。我们没有 <li>Item 3</li> 树，所以我们直接插入它。好的！

好吧，新的更新正在等待我们的比较：

我们当前的 UI 状态

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

以及即将到来生成的 UI 状态：

<ul>
  <li>Item 4</li>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

请记住：我们只是机器，我们无法理解第 1 项、第 2 项和第 3 项仍然存在。我们正在运行我们的比较算法：<li>Item 1</li> 树与 <li>Item 4</li> 不匹配。其他人也是如此，<li>Item 2</li>、<li>Item 1</li> 等。所以我们最终更新了整个树。不是真正的优化方式，对吧？

这就是 key 属性发挥作用的地方！

让我们使用 key 将原始树中的子节点与后续树中的子节点进行匹配：

<ul>
  <li key="first">Item 1</li>
  <li key="second">Item 2</li>
  <li key="third">Item 3</li>
</ul>

现在每个子节点都有 key 属性

<ul>
  <li key="fourth">Item 4</li>
  <li key="first">Item 1</li>
  <li key="second">Item 2</li>
  <li key="third">Item 3</li>
</ul>

因此，现在我们不是逐步比较每个子元素，而是简单地将一个键与每个项目关联起来。现在我们知道第一个、第二个和第三个键的元素刚刚移动，第四个键的元素是新的。整洁的！

所以我想大家现在明白为什么我们需要一个 key prop 以及为什么我们不能使用元素的索引作为 key。仅当项目从不重新排序时，使用数组中项目的索引作为键才有效。

在实践中，找到 key 通常并不难。我们要显示的元素可能已经有一个唯一的 ID，因此可以可以来自我们的 api 返回的数据：

<li key={item.id}>{item.name}</li>

key 的其他作用

key 属性有一个小技巧。它用的不多，但是理解这个原理会帮助我们更好地理解 React。它与 React 组件“实例”以及 React 如何处理 key prop 有关。

React 的 key 属性让我们能够控制组件实例。每次 React 渲染组件时，它都会调用我们的函数来检索它用来更新 DOM 的新 React 元素。如果我们返回相同的元素类型，它会保留这些组件/DOM 节点，即使所有道具都已更改。

唯一的例外是 key 属性。这允许我们返回完全相同的元素类型，但强制 React 卸载前一个实例并安装一个新实例。这意味着当时组件中存在的所有状态都将被完全删除，并且该组件会出于所有意图和目的而“重新初始化”。对于函数组件，这意味着 React 将对效果运行清理，然后运行状态初始化器和 effect 回调。

注意：效果清理实际上发生在新组件安装之后，但在运行下一个 effect 回调之前。

对于类组件，React 将运行 componentWillUnmount、constructor 和 componentDidMount。

const List = () => {
  console.log('List called');
  
  const [listItems, setListItems] = React.useState(() => {
    console.log('List useState initializer');
    return [1, 2, 3];
  });
  const addItem = () => setListItems(
    items => [...items, items[items.length - 1] + 1]
  );
  React.useEffect(() => {
    console.log('List useEffect callback');
    return () => {
      console.log('List useEffect cleanup');
    }
  }, [])
  console.log('List returning react elements');
  return (
    <>
      <ul>
        {listItems.map(item => <li key={item}>{`Item ${item}`}</li>}
      </ul>
      <button onClick={addItem}>Add Item</button>
    </>
  )
}
function ListParent() {
  // 使用 useReducer 确保任何时候调用 setListKey，`listKey` 被设置为一个新对象
  const [listKey, setListKey] = React.useReducer(c => c + 1, 0);
  return (
    <div>
      <button onClick={setListKey}>reset</button>
      <List key={listKey} />
    </div>
  )
}

这是单击“添加项目”按钮然后单击重置后我们将在控制台中看到的内容：

// getting mounted
List called
List useState initializer
List returning react elements
// now it's mounted
List useEffect callback
// click the counter button
List called
List returning react elements
// notice the initializer and effect callback are not called this time
// click the reset button in the parent
// these next logs are happening for our new instance
List called
List useState initializer
List returning react elements
// cleanup old instance
List useEffect cleanup
// new instance is now mounted
List useEffect callback