react如何遍历
遍历数组或对象的方法
在React中，遍历数组或对象是常见的操作，通常用于渲染列表或动态生成组件。以下是几种常用的遍历方法：
使用map遍历数组
map是遍历数组并返回新数组的高阶函数，适合渲染列表。每个元素需要唯一的key属性以优化性能。
const items = ['Apple', 'Banana', 'Orange'];
return (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);使用forEach遍历数组
forEach仅执行遍历操作，不返回新数组。适用于不需要渲染的场景，如计算或副作用处理。
const items = ['Apple', 'Banana', 'Orange'];
items.forEach((item) => {
console.log(item);
});遍历对象
使用Object.keys、Object.values或Object.entries将对象转为数组后遍历。
const fruitColors = { apple: 'red', banana: 'yellow', orange: 'orange' };
return (
<ul>
{Object.entries(fruitColors).map(([fruit, color]) => (
<li key={fruit}>{fruit}: {color}</li>
))}
</ul>
);使用for...of循环
直接遍历数组或可迭代对象，适合复杂逻辑。
const items = ['Apple', 'Banana', 'Orange'];
const listItems = [];
for (const item of items) {
listItems.push(<li key={item}>{item}</li>);
}
return <ul>{listItems}</ul>;条件渲染与遍历结合
在遍历时结合条件判断，动态过滤或渲染内容。
const numbers = [1, 2, 3, 4, 5];
return (
<ul>
{numbers.map((num) => (
num % 2 === 0 && <li key={num}>{num} is even</li>
))}
</ul>
);注意事项
key属性：列表项必须包含唯一且稳定的key，通常使用ID而非索引。- 性能优化：避免在
map中直接定义函数或内联样式，以减少不必要的重新渲染。 - 空值处理：遍历前检查数组或对象是否为空，避免运行时错误。
const items = null;
return (
<ul>
{items?.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
