当前位置：首页 > React

react如何遍历

2026-02-11 12:51:31React

遍历数组或对象的方法

在React中遍历数组或对象是常见的操作，可以通过多种方式实现。以下是几种常用的方法：

使用map方法遍历数组
map是遍历数组并返回新数组的最常用方法，适合渲染列表元素。

const numbers = [1, 2, 3];
const listItems = numbers.map((number) => <li key={number}>{number}</li>);
return <ul>{listItems}</ul>;

使用forEach遍历数组（不直接渲染）
forEach适用于执行副作用操作（如修改数据），但不返回新数组。

const numbers = [1, 2, 3];
numbers.forEach((number) => console.log(number));

使用for...of遍历数组
ES6的for...of语法可直接遍历数组元素。

const numbers = [1, 2, 3];
for (const number of numbers) {
  console.log(number);
}

遍历对象
使用Object.keys()、Object.values()或Object.entries()转换为数组后遍历。

react如何遍历

const obj = { a: 1, b: 2 };
Object.keys(obj).map((key) => <div key={key}>{obj[key]}</div>);

条件渲染与遍历结合

过滤后遍历
通过filter筛选数据后再渲染。

const numbers = [1, 2, 3, 4];
const evenNumbers = numbers.filter((n) => n % 2 === 0);
return <ul>{evenNumbers.map((n) => <li key={n}>{n}</li>)}</ul>;

空值处理
使用条件判断避免空数组或未定义数据导致的错误。

const items = [];
return <ul>{items?.map((item) => <li key={item.id}>{item.name}</li>) || null}</ul>;

性能优化技巧

使用key属性
为动态列表添加唯一的key（如ID），避免不必要的重新渲染。

react如何遍历

const todos = [{ id: 1, text: "Learn React" }];
return <ul>{todos.map((todo) => <li key={todo.id}>{todo.text}</li>)}</ul>;

避免索引作为key
除非列表静态且无排序操作，否则避免使用数组索引作为key。

虚拟化长列表
对于超长列表（如1000+项），使用react-window或react-virtualized优化性能。

import { FixedSizeList as List } from 'react-window';
const Row = ({ index, style }) => <div style={style}>Row {index}</div>;
return <List height={600} itemCount={1000} itemSize={35} width={300}>{Row}</List>;

特殊场景处理

遍历嵌套数据结构
递归组件可用于渲染嵌套对象或树形结构。

const Tree = ({ data }) => (
  <ul>
    {data.map((node) => (
      <li key={node.id}>
        {node.name}
        {node.children && <Tree data={node.children} />}
      </li>
    ))}
  </ul>
);

异步数据遍历
结合useEffect和状态管理处理异步加载的数据。

const [data, setData] = useState([]);
useEffect(() => {
  fetchAPI().then((res) => setData(res));
}, []);
return <ul>{data.map((item) => <li key={item.id}>{item.name}</li>)}</ul>;