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} 
  />
))}