当前位置：首页 > React

react中如何遍历

2026-01-23 17:09:02React

遍历数组

在React中遍历数组通常使用map方法，它会返回一个新的数组，适合渲染列表元素。

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

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

遍历对象

遍历对象可以使用Object.keys()或Object.entries()方法转换为数组后再进行映射。

const person = { name: 'John', age: 30, job: 'Developer' };

function ObjectList() {
  return (
    <ul>
      {Object.keys(person).map((key) => (
        <li key={key}>
          {key}: {person[key]}
        </li>
      ))}
    </ul>
  );
}

条件渲染

在遍历时结合条件判断，可以过滤或选择性渲染某些元素。

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

function EvenNumbers() {
  return (
    <ul>
      {numbers.map((num) => 
        num % 2 === 0 ? <li key={num}>{num}</li> : null
      )}
    </ul>
  );
}

使用Fragment

当不需要包裹元素时，可以使用<React.Fragment>或简写<>来避免额外的DOM节点。

const tags = ['React', 'Vue', 'Angular'];

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

性能优化

对于大型列表，建议使用key属性帮助React识别元素变化，提升渲染性能。避免使用索引作为key，尽量使用唯一ID。

react中如何遍历

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

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