当前位置：首页 > React

react如何循环组件

2026-03-30 19:10:47React

循环渲染组件的方法

在React中循环渲染组件通常使用map函数或for循环。以下是几种常见方法：

使用Array.map()方法

const items = ['Item 1', 'Item 2', 'Item 3'];

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

使用for循环

const items = ['Item 1', 'Item 2', 'Item 3'];

function MyComponent() {
  const itemList = [];
  for (let i = 0; i < items.length; i++) {
    itemList.push(<li key={i}>{items[i]}</li>);
  }

  return <ul>{itemList}</ul>;
}

使用对象数组

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];

function UserList() {
  return (
    <div>
      {users.map(user => (
        <div key={user.id}>
          <p>{user.name}</p>
        </div>
      ))}
    </div>
  );
}

注意事项

确保为每个循环项提供唯一的key属性，这有助于React识别哪些项目已更改、添加或删除。避免使用数组索引作为key，除非列表是静态的且不会重新排序。

对于性能敏感的场景，可以考虑使用React.memo来优化组件渲染：

react如何循环组件

const MemoizedComponent = React.memo(function Component({ item }) {
  return <div>{item}</div>;
});

function ParentComponent() {
  return (
    <div>
      {items.map(item => (
        <MemoizedComponent key={item.id} item={item} />
      ))}
    </div>
  );
}