迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 >

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

作者:迹忆客 最近更新:2022/06/08 浏览次数:

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

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

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

React Warning

好吧,看来我们需要为每个子元素传递一个特殊的唯一键属性。 好的,我们知道 Arraymap 方法在其回调中接受 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 文档,该算法基于两个假设:

  1. 两种不同类型的元素会产生不同的树。
  2. 开发人员可以使用 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 将运行 componentWillUnmountconstructorcomponentDidMount

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

总结

当我们尝试渲染一组元素时, key 属性不仅仅是为了摆脱恼人的 React 控制台错误(来自 React 的所有“恼人”错误都很棒,可以帮助我们避免错误,所以请不要忽略它们)。 key 属性也可以是控制 React 组件和元素实例的有用机制。

除非注明转载,本站文章均为原创或翻译,欢迎转载,转载请以链接形式注明出处

本文地址:

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

热门文章

教程更新

热门标签

扫码一下
查看教程更方便