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

  • 5
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

zayyo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值