React 中 keys 的作用及其原理-JavaScript中文网-JavaScript教程资源分享门户

在 React 中，keys 是一个非常重要的概念。在渲染列表或者动态生成组件的时候，keys 能够帮助 React 更好地管理组件的状态和更新，提高性能和用户体验。本文将介绍 React 中 keys 的作用及其原理，并提供示例代码和指导意义。

keys 的作用

在 React 中，每个组件都有一个唯一的标识符，称为 key。这个 key 可以帮助 React 更好地管理组件的状态和更新，提高性能和用户体验。具体来说，keys 的作用主要有以下几个方面：

1. 提高渲染性能

当渲染一个列表时，React 需要知道每个子元素的状态和位置，以便更新和重绘。如果没有 key，React 只能通过比较每个子元素的 props 和 state 来确定哪些元素需要更新，这样会导致性能问题。而有了 key，React 可以根据 key 来确定哪些元素需要更新，哪些元素需要插入或删除，从而提高渲染性能。

2. 保持组件状态

当动态生成组件时，如果没有 key，React 会在每次更新时销毁旧组件并创建新组件，这样会导致组件状态的丢失。而有了 key，React 可以根据 key 来保持组件状态，从而提高用户体验。

3. 解决组件重复问题

如果一个列表中有重复的元素，没有 key，React 会认为这些元素是同一个，从而导致一些不必要的问题。而有了 key，React 可以根据 key 来区分不同的元素，从而解决组件重复问题。

keys 的原理

在 React 中，每个组件都有一个唯一的标识符，称为 key。这个 key 可以是一个字符串或者数字，通常是通过数据来生成的。当渲染一个列表或者动态生成组件时，React 会根据 key 来管理组件的状态和更新。

具体来说，当 React 渲染一个列表或者动态生成组件时，React 会为每个子元素分配一个 key。React 会将这些 key 存储在内部的数据结构中，并根据 key 来判断哪些元素需要更新，哪些元素需要插入或删除。

例如，下面是一个渲染列表的示例代码：

// www.javascriptcn.com code example
const list = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Bob' },
];

function List() {
  return (
    <ul>
      {list.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

在这个示例代码中，我们将每个子元素的 id 作为 key。这样，React 可以根据 id 来管理组件的状态和更新，提高性能和用户体验。

指导意义

在 React 中，keys 是一个非常重要的概念，能够帮助我们更好地管理组件的状态和更新，提高性能和用户体验。因此，在编写 React 组件时，我们应该始终记得为每个子元素分配一个唯一的 key，并根据具体情况选择合适的 key。

同时，我们也应该注意避免在 key 中使用随机数或者索引等不稳定的值，因为这样会导致一些不必要的问题。我们应该尽可能使用稳定的值，例如数据的唯一标识符。

最后，我们也应该注意避免在组件内部修改 key，因为这样会导致一些不必要的问题。我们应该始终将 key 作为组件的 props，从而保持组件的可控性和可复用性。

示例代码

下面是一个动态生成组件的示例代码：

// www.javascriptcn.com code example
function DynamicList() {
  const [list, setList] = useState([]);

  function handleClick() {
    const id = list.length + 1;
    const name = `Item ${id}`;

    setList([...list, { id, name }]);
  }

  return (
    <div>
      <button onClick={handleClick}>Add Item</button>
      <ul>
        {list.map(item => (
          <Item key={item.id} name={item.name} />
        ))}
      </ul>
    </div>
  );
}

function Item({ name }) {
  return <li>{name}</li>;
}

在这个示例代码中，我们动态生成一个列表，并为每个子元素分配一个唯一的 id。当用户点击按钮时，我们会向列表中添加一个新的元素。由于我们使用了 key，React 可以根据 id 来保持组件状态，从而提高用户体验。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d2b039a941bf71345390e2

React 中 keys 的作用及其原理