React的列表和Key

React的列表

如果我们要在React中把一个数组转化成为我们的列表要怎么转换呢？

你可以通过使用 {} 在 JSX 内构建一个元素集合。

js 复制代码

//定义一个NumberList组件
function NumberList(props) {

    //使用组件需要传入一个number值
  const numbers = props.numbers;
  
    //使用 map() 方法来遍历 numbers 数组。将数组中的每个元素变成 `<li>` 标签
      const listItems = numbers.map((number) =>  <li>{number}</li>  ); 
      
      //然后我们把整个 `listItems` 插入到 `<ul>` 元素中
      return (
        <ul>{listItems}</ul>  
        );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />, 
  document.getElementById('root')
);

我们使用 Javascript 中的 map() 方法来遍历 numbers 数组。将数组中的每个元素变成 <li> 标签，最后我们将得到的数组赋值给 listItems.然后我们把整个 listItems 插入到 <ul> 元素中，然后渲染进 DOM。

当我们运行这段代码，将会看到一个警告 a key should be provided for list items，意思是当你创建一个元素时，必须包括一个特殊的 key 属性。这是为了帮助 React 识别每个列表项的身份，并在进行列表更新时进行优化。

添加key

添加之后就不会再有警告了

js 复制代码

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>   
            {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

为什么一定要添加key

识别列表项的身份：key 属性充当列表项的唯一标识符，帮助 React 区分每个列表项并识别其身份。在进行列表更新时，React 使用 key 属性来确定哪些列表项需要进行添加、移除或更新操作。
提高渲染性能：通过为列表项提供唯一的 key 属性，React 可以更高效地比较前后两个列表的差异，并只对真正需要更新的列表项进行重新渲染。这样可以减少不必要的 DOM 操作和组件实例的创建和销毁，从而提高整体渲染性能。
避免状态丢失：当列表项的顺序发生变化时，如果没有提供 key 属性，React 可能会错误地认为某些列表项被移除，而实际上它们只是在不同的位置重新排列。这可能导致 React 销毁和重新创建组件实例，导致组件状态丢失或不正确的行为。
保持稳定的标识：key 属性的值应该是稳定的、在列表的更新过程中不会发生变化的。这样可以确保在列表项更新时，React 能够正确地匹配前后两个列表中的对应项，并进行正确的更新操作。

key

key的要求

一个元素的 key 必须是这个元素在列表中拥有的一个独一无二的
元素的 key 只有放在就近的数组上下文中才有意义。
key 只是在兄弟节点之间必须唯一

元素的 key 只有放在就近的数组上下文中才有意义。

如果你提取出一个 ListItem 组件，你应该把 key 保留在数组中的这个 <ListItem /> 元素上，而不是放在 ListItem 组件中的 <li> 元素上。

例子：不正确的使用 key 的方式

js 复制代码

    function ListItem(props) {
      const value = props.value;
      return (
        // 错误！你不需要在这里指定 key：   
        <li key={value.toString()}>     
        {value}
        </li>
      );
    }

    function NumberList(props) {
      const numbers = props.numbers;
      const listItems = numbers.map((number) =>
        // 错误！元素的 key 应该在这里指定：   
        <ListItem value={number} />  
        );
      return (
        <ul>
          {listItems}
        </ul>
      );
    }

    const numbers = [1, 2, 3, 4, 5];
    ReactDOM.render(
      <NumberList numbers={numbers} />,
      document.getElementById('root')
    );

例子：正确的使用 key 的方式

js 复制代码

    function ListItem(props) {
      // 正确！这里不需要指定 key： 
      return <li>{props.value}</li>;
      }

    function NumberList(props) {
      const numbers = props.numbers;
      const listItems = numbers.map((number) =>
        // 正确！key 应该在数组的上下文中被指定   
        <ListItem key={number.toString()}      value={number} />
      );
      return (
        <ul>
          {listItems}
        </ul>
      );
    }

    const numbers = [1, 2, 3, 4, 5];
    ReactDOM.render(
      <NumberList numbers={numbers} />,
      document.getElementById('root')
    );

一个好的经验法则是：在 map() 方法中的元素需要设置 key 属性。

key 只是在兄弟节点之间必须唯一

数组元素中使用的 key 在其兄弟节点之间应该是独一无二的。然而，它们不需要是全局唯一的。当我们生成两个不同的数组时，我们可以使用相同的 key 值：