当前位置：首页 > React

react如何迭代循环

2026-02-12 05:41:06React

在 React 中迭代循环的方法

React 提供了多种方式来实现数据的迭代和循环渲染，以下是常见的几种方法：

使用 `map` 方法

map 是 JavaScript 数组的原生方法，也是最常用的 React 迭代方式。它返回一个新数组，适合渲染列表。

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

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

使用 `forEach` 方法

forEach 也可以用于迭代，但它不返回新数组，通常需要配合一个外部数组来收集结果。

react如何迭代循环

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

function List() {
  const listItems = [];
  items.forEach((item, index) => {
    listItems.push(<li key={index}>{item}</li>);
  });
  return <ul>{listItems}</ul>;
}

使用 `for` 循环

传统的 for 循环可以在函数组件外部或渲染逻辑中使用。

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

function List() {
  const listItems = [];
  for (let i = 0; i < items.length; i++) {
    listItems.push(<li key={i}>{items[i]}</li>);
  }
  return <ul>{listItems}</ul>;
}

使用 `for...of` 循环

for...of 循环可以更简洁地遍历可迭代对象。

react如何迭代循环

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

function List() {
  const listItems = [];
  let index = 0;
  for (const item of items) {
    listItems.push(<li key={index}>{item}</li>);
    index++;
  }
  return <ul>{listItems}</ul>;
}

使用 `React.Children.map`

如果需要在子组件上进行迭代，可以使用 React.Children.map。

function List({ children }) {
  return (
    <ul>
      {React.Children.map(children, (child, index) => (
        <li key={index}>{child}</li>
      ))}
    </ul>
  );
}

使用第三方库（如 lodash）

如果需要更复杂的迭代逻辑，可以使用 lodash 的 _.map 或 _.forEach。

import _ from 'lodash';

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

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

注意事项

Key 属性：在迭代渲染时，必须为每个元素分配唯一的 key 属性，通常是数据的唯一标识（如 id），避免使用索引（index）作为 key，除非列表是静态的。
性能优化：对于大型列表，考虑使用虚拟滚动（如 react-window）来优化性能。
条件渲染：可以在迭代中结合条件判断（如 filter）来动态渲染内容。