当前位置：首页 > React

react如何便利循环

2026-02-26 13:03:19React

循环渲染列表数据

在React中遍历数组并渲染元素通常使用map方法。map会返回一个新数组，每个元素经过函数处理：

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

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

添加唯一key属性

React要求动态生成的元素必须包含唯一的key属性。当数据有唯一ID时应优先使用ID而非数组索引：

react如何便利循环

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

{todos.map(todo => (
  <div key={todo.id}>{todo.text}</div>
))}

条件渲染处理

结合filter方法可以实现条件循环渲染。以下示例只显示未完成的任务：

react如何便利循环

const tasks = [
  { id: 1, text: 'Task 1', done: false },
  { id: 2, text: 'Task 2', done: true }
];

{tasks
  .filter(task => !task.done)
  .map(task => (
    <p key={task.id}>{task.text}</p>
  ))
}

遍历对象属性

对于对象可以使用Object.keys()或Object.entries()转换后渲染：

const user = {
  name: 'Alice',
  age: 25,
  job: 'Developer'
};

{Object.entries(user).map(([key, value]) => (
  <p key={key}>{`${key}: ${value}`}</p>
))}

性能优化建议

当处理大型列表时，考虑使用虚拟滚动技术（如react-window库）来提高性能：

import { FixedSizeList } from 'react-window';

const data = Array(1000).fill().map((_, i) => `Item ${i+1}`);

function Row({ index, style }) {
  return <div style={style}>{data[index]}</div>;
}

function BigList() {
  return (
    <FixedSizeList
      height={400}
      width={300}
      itemCount={data.length}
      itemSize={35}
    >
      {Row}
    </FixedSizeList>
  );
}