当前位置：首页 > React

react如何循环

2026-01-13 11:24:38React

循环渲染列表

在React中循环渲染列表通常使用map方法，这是最常用的方式。通过map可以将数组中的每个元素转换为React元素并渲染到页面上。

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

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

添加唯一key属性

当循环渲染元素时，必须为每个元素添加一个唯一的key属性。这个key帮助React识别哪些元素发生了变化，提高渲染性能。

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

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

使用条件渲染

可以在循环中结合条件判断，实现更灵活的渲染逻辑。使用三元表达式或逻辑与运算符进行条件渲染。

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

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

处理空数组情况

当数组可能为空时，应该添加空状态处理，避免显示空白内容或报错。

const emptyArray = [];

function EmptyList() {
  return (
    <div>
      {emptyArray.length > 0 ? (
        emptyArray.map(item => <div key={item}>{item}</div>)
      ) : (
        <p>No items to display</p>
      )}
    </div>
  );
}

使用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的useMemo钩子来优化性能。

import { useMemo } from 'react';

function LargeList({ items }) {
  const memoizedItems = useMemo(() => {
    return items.map(item => (
      <div key={item.id}>{item.name}</div>
    ));
  }, [items]);

  return <div>{memoizedItems}</div>;
}

react如何循环