当前位置：首页 > React

react数据如何遍历

2026-03-30 21:32:26React

遍历数组

在React中遍历数组最常用的方法是使用map函数，它会返回一个新的数组，包含对原数组每个元素处理后的结果。每个元素需要包含唯一的key属性以提高渲染性能。

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

function ListComponent() {
  return (
    <ul>
      {data.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 UserInfo() {
  return (
    <div>
      {Object.entries(user).map(([key, value]) => (
        <p key={key}>{`${key}: ${value}`}</p>
      ))}
    </div>
  );
}

条件渲染

在遍历过程中可以结合条件判断，使用三元运算符或逻辑与运算符进行条件渲染。

react数据如何遍历

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

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

使用Fragment

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

const items = ['Item 1', 'Item 2', 'Item 3'];

function ItemList() {
  return (
    <>
      {items.map(item => (
        <React.Fragment key={item}>
          <p>{item}</p>
        </React.Fragment>
      ))}
    </>
  );
}

性能优化

对于大型列表，建议使用虚拟滚动库如react-window或react-virtualized来提高性能。

import { FixedSizeList as List } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>Row {index}</div>
);

function BigList() {
  return (
    <List
      height={150}
      itemCount={1000}
      itemSize={35}
      width={300}
    >
      {Row}
    </List>
  );
}