当前位置：首页 > React

react 如何循环

2026-01-13 11:54:47React

循环渲染列表

在React中，循环渲染列表通常使用map方法。map可以遍历数组并返回一个新的React元素数组。

const items = ['Apple', 'Banana', 'Orange'];

function List() {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

添加唯一key

React要求列表中的每个元素都有一个唯一的key属性。通常使用数据的唯一ID作为key，如果没有ID可以用索引作为备用方案。

const todos = [
  { id: 1, text: 'Learn React' },
  { id: 2, text: 'Build a project' }
];

function TodoList() {
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

条件渲染结合循环

可以在循环中结合条件判断，实现更复杂的渲染逻辑。

const numbers = [1, 2, 3, 4, 5];

function NumberList() {
  return (
    <ul>
      {numbers.map(number => (
        number % 2 === 0 ? <li key={number}>{number} is even</li> : null
      ))}
    </ul>
  );
}

使用Fragment分组

当需要循环渲染多个相邻元素而不想添加额外DOM节点时，可以使用React Fragment。

const tags = ['React', 'JavaScript', 'Frontend'];

function TagList() {
  return (
    <>
      {tags.map((tag, index) => (
        <React.Fragment key={index}>
          <span>{tag}</span>
          <br />
        </React.Fragment>
      ))}
    </>
  );
}

性能优化

对于大型列表，建议使用虚拟滚动技术或React的React.memo来优化性能。

react 如何循环

const MemoizedItem = React.memo(function Item({ item }) {
  return <li>{item.text}</li>;
});

function BigList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <MemoizedItem key={item.id} item={item} />
      ))}
    </ul>
  );
}

标签: react