react列表和keys

最新推荐文章于 2024-08-09 20:12:31 发布

原创最新推荐文章于 2024-08-09 20:12:31 发布 · 519 阅读

0 ·

CC 4.0 BY-SA版权

react 专栏收录该内容

56 篇文章

订阅专栏

本文介绍如何在React中使用列表组件渲染动态内容，并解释了Keys的重要性及其正确使用方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

列表和`keys`

基础的列表组件

生成一个listItems数组，组件返回ul列表,渲染页面

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')
);

Keys

数组中的每一项都要有固定的key，以便React区分哪些元素变化(增加/修改/移除).
它只是作为React自己识别，并不会传递到组件上
同一个数组中不能有同样的key

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);

没有固定ID的时候也可以用当前项的index代替，但是不建议这样做，因为会拖慢速度

const todoItems = todos.map((todo, index) =>
  // Only do this if items have no stable IDs
  <li key={index}>
    {todo.text}
  </li>
);

点击这里了解keys的重要性

提升带有key的组件

Key只有在数组中才有意义，想要提升ListItem为一个组件是，需要把key留在数组中的<LitsItem />，而不是<li>上

//错误示例
function ListItem(props) {
  const value = props.value;
  return (
    // Wrong! There is no need to specify the key here:
    <li key={value.toString()}>
      {value}
    </li>
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // Wrong! The key should have been specified here:
    <ListItem value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

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

//正确示例
function ListItem(props) {
  // Correct! There is no need to specify the key here:
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // Correct! Key should be specified inside the array.
    <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')
);