react中map如何使用
map 方法的基本用法
在 React 中，map 方法通常用于遍历数组并生成一组 React 元素。map 会返回一个新数组，其中每个元素是对原数组元素调用回调函数的结果。
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) => <li key={number}>{number}</li>);key 属性的重要性
使用 map 生成列表时，必须为每个列表项分配一个唯一的 key 属性。key 帮助 React 识别哪些元素发生了变化，从而优化渲染性能。
const todos = [
{ id: 1, text: 'Learn React' },
{ id: 2, text: 'Build a project' },
];
const todoList = todos.map((todo) => (
<li key={todo.id}>{todo.text}</li>
));处理嵌套数据
对于嵌套数据结构，可以结合 map 和对象解构来简化代码。
const users = [
{ id: 1, name: 'Alice', hobbies: ['Reading', 'Hiking'] },
{ id: 2, name: 'Bob', hobbies: ['Gaming', 'Cooking'] },
];
const userList = users.map(({ id, name, hobbies }) => (
<div key={id}>
<h3>{name}</h3>
<ul>
{hobbies.map((hobby, index) => (
<li key={index}>{hobby}</li>
))}
</ul>
</div>
));条件渲染与 map
可以在 map 回调中加入条件判断，实现有条件地渲染元素。
const products = [
{ id: 1, name: 'Laptop', inStock: true },
{ id: 2, name: 'Phone', inStock: false },
];
const productList = products.map((product) => (
product.inStock ? <div key={product.id}>{product.name} (In Stock)</div> : null
));在组件中使用 map
将 map 逻辑封装在组件中可以提升代码的可复用性。
function TodoList({ todos }) {
return (
<ul>
{todos.map((todo) => (
<TodoItem key={todo.id} todo={todo} />
))}
</ul>
);
}
function TodoItem({ todo }) {
return <li>{todo.text}</li>;
}性能优化
对于大型列表，避免在 map 中使用内联函数定义，以减少不必要的重新渲染。
// 不推荐
{todos.map((todo) => (
<TodoItem
key={todo.id}
onClick={() => handleClick(todo.id)}
/>
))}
// 推荐
{todos.map((todo) => (
<TodoItem
key={todo.id}
onClick={handleClick}
id={todo.id}
/>
))}
