react中如何遍历
遍历数组或对象的方法
在React中遍历数组或对象是常见操作，可以通过多种方式实现。以下是几种常用的方法：
使用map遍历数组
map是遍历数组并返回新数组的最常用方法，适合渲染列表。
const numbers = [1, 2, 3];
const listItems = numbers.map((number) =>
<li key={number.toString()}>{number}</li>
);
return <ul>{listItems}</ul>;使用forEach遍历数组
forEach适合执行副作用操作（如修改DOM），但不会返回新数组。
const numbers = [1, 2, 3];
numbers.forEach((number) => {
console.log(number); // 执行操作但无返回值
});使用for循环遍历数组
传统for循环适合需要索引控制的场景。
const numbers = [1, 2, 3];
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i]); // 通过索引访问
}遍历对象
使用Object.keys、Object.values或Object.entries转换为数组后遍历。
const obj = { a: 1, b: 2 };
Object.keys(obj).map((key) => (
<div key={key}>{key}: {obj[key]}</div>
));渲染列表时的注意事项
添加key属性
React要求列表项必须有唯一的key（通常用ID或稳定值），用于优化渲染性能。
const items = data.map((item) => (
<Item key={item.id} {...item} />
));避免使用索引作为key
除非列表静态且无排序/过滤操作，否则索引可能导致渲染问题。
条件渲染
结合filter实现条件遍历：
const filteredItems = data
.filter((item) => item.isActive)
.map((item) => <Item key={item.id} {...item} />);性能优化建议
虚拟列表
长列表使用react-window或react-virtualized减少DOM节点。
避免内联函数
在循环中将函数提取到组件外部，避免每次渲染创建新函数。
使用useMemo缓存结果
当依赖项未变化时，避免重复计算遍历结果。
const memoizedList = useMemo(() =>
data.map((item) => <Item key={item.id} {...item} />),
[data]);
