当前位置：首页 > React

react组件如何遍历

2026-02-26 02:30:15React

遍历数组或对象

在React中遍历数组或对象通常使用map方法，它返回一个新的数组，适合渲染列表元素。对于对象，可先用Object.keys()或Object.entries()转换为可遍历的数组。

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

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

使用唯一key属性

React要求列表中的每个元素必须有唯一的key属性，通常使用数据中的唯一ID或索引（不推荐动态数据中使用索引）。

react组件如何遍历

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

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

遍历对象

遍历对象时需先将对象转换为数组。Object.entries()返回键值对数组，Object.keys()返回键数组。

const user = { name: 'Alice', age: 25, role: 'Admin' };

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

条件渲染与过滤

结合filter方法可在遍历时实现条件渲染，过滤不符合条件的元素。

react组件如何遍历

const products = [
  { id: 1, name: 'Laptop', inStock: true },
  { id: 2, name: 'Phone', inStock: false }
];

function ProductList() {
  return (
    <ul>
      {products
        .filter(product => product.inStock)
        .map(product => (
          <li key={product.id}>{product.name}</li>
        ))}
    </ul>
  );
}

使用Fragment减少DOM层级

遍历时若不需要包裹元素，可用<React.Fragment>或简写<>避免额外DOM节点。

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

function TagList() {
  return (
    <>
      {tags.map((tag, index) => (
        <React.Fragment key={index}>
          <span>{tag}</span>
          <br />
        </React.Fragment>
      ))}
    </>
  );
}

性能优化

对于大型列表，使用React.memo避免不必要的重新渲染，或引入虚拟滚动库如react-window。

const MemoizedItem = React.memo(function Item({ item }) {
  return <div>{item.name}</div>;
});

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