当前位置：首页 > React

react如何循环渲染

2026-02-11 16:26:48React

循环渲染的实现方式

在React中，循环渲染通常通过数组的map方法实现，将数据数组转换为React元素数组。以下是几种常见场景的示例：

渲染简单列表

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

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

渲染对象数组

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

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

使用索引作为key

当数据没有唯一标识时，可以使用数组索引作为key，但这不是最佳实践：

{items.map((item, index) => (
  <div key={index}>{item}</div>
))}

性能优化技巧

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

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

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

条件渲染结合循环

可以在循环中结合条件判断进行过滤或条件渲染：

const products = [
  { id: 1, name: 'Phone', inStock: true },
  { id: 2, name: 'Laptop', inStock: false }
];

function ProductList() {
  return (
    <div>
      {products
        .filter(product => product.inStock)
        .map(product => (
          <div key={product.id}>{product.name}</div>
        ))
      }
    </div>
  );
}

动态生成组件

循环也可以用于动态生成不同组件：

react如何循环渲染

const components = [
  { type: 'Header', props: { text: 'Welcome' } },
  { type: 'Content', props: { body: 'Hello World' } }
];

function DynamicRenderer() {
  return (
    <div>
      {components.map((item, index) => {
        const Component = componentTypes[item.type];
        return <Component key={index} {...item.props} />;
      })}
    </div>
  );
}

标签: react