当前位置：首页 > React

react 如何遍历

2026-03-30 17:24:33React

遍历数组

在React中遍历数组通常使用map方法，它会返回一个新的数组，每个元素都经过处理。这种方法适用于渲染列表。

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

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

遍历对象

遍历对象可以使用Object.keys、Object.values或Object.entries方法，将对象转换为数组后再进行遍历。

react 如何遍历

const user = { name: 'John', age: 30, city: 'New York' };

function ObjectComponent() {
  return (
    <ul>
      {Object.entries(user).map(([key, value]) => (
        <li key={key}>
          {key}: {value}
        </li>
      ))}
    </ul>
  );
}

条件渲染

在遍历时可以结合条件判断，使用filter方法或三元运算符来过滤或条件渲染某些元素。

react 如何遍历

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

function FilteredList() {
  return (
    <ul>
      {numbers
        .filter(number => number % 2 === 0)
        .map(number => (
          <li key={number}>{number}</li>
        ))}
    </ul>
  );
}

使用Fragment

如果不需要额外的DOM节点包裹遍历的元素，可以使用React.Fragment或简写<>。

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

function FragmentList() {
  return (
    <>
      {tags.map((tag, index) => (
        <span key={index}>{tag}</span>
      ))}
    </>
  );
}

性能优化

对于大型列表，使用key属性可以帮助React识别哪些元素发生了变化，提高渲染性能。避免使用索引作为key，尽量使用唯一标识。

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

function OptimizedList() {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}