当前位置：首页 > React

react如何循环渲染

2026-03-30 19:25:17React

循环渲染方法

在React中，循环渲染通常通过数组的map方法实现，将数据数组转换为React元素数组。这种方式简洁高效，适合大多数场景。

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

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

key属性注意事项

循环渲染时必须为每个元素提供唯一的key属性，这有助于React识别哪些元素发生了变化。避免使用数组索引作为key，除非列表是静态的且不会重新排序。

const todos = [
  { id: 1, text: 'Learn React' },
  { id: 2, text: 'Build 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(num => (
        num % 2 === 0 ? <li key={num}>Even: {num}</li> : <li key={num}>Odd: {num}</li>
      ))}
    </ul>
  );
}

性能优化技巧

对于大型列表，考虑使用虚拟滚动技术或React.memo来优化性能。这能显著减少DOM操作数量，提升渲染效率。

const MemoizedListItem = React.memo(function ListItem({ item }) {
  return <li>{item.name}</li>;
});

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

循环渲染组件

可以直接循环渲染自定义组件，这种方式使代码更模块化且易于维护。

react如何循环渲染

function User({ user }) {
  return <div>{user.name}</div>;
}

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

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

标签: react