React的列表和Key

React的列表

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

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

//定义一个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

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

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 的方式

    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 的方式

    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 值：