React 列表&Keys – BuildCodePro

React 列表与Keys详解

编程小白也能懂的React核心知识点

📋 为什么要列表渲染？

在开发中，经常会遇到需要显示多个相似组件的情况，比如：

用户列表
商品展示
评论区域
待办事项

手动一个个写组件是不现实的，我们需要一种动态生成列表的方法。

React采用数组.map()方法来实现列表渲染，这是最常用的处理方式。

🔄 如何使用map()渲染列表

在JSX中，你可以直接在{}中使用数组的map()方法：

const numbers = [1, 2, 3, 4, 5];

const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);

然后在需要的地方插入{listItems}

React会自动将这个数组展开，渲染成多个元素。

🔑 为什么需要Key属性？

Key是React用于识别列表项身份的特殊字符串属性。

当列表发生变化时（增删改），React需要知道哪些元素改变了：

帮助React高效更新UI
避免不必要的重新渲染
维持组件状态

没有Key，React会使用数组索引(index)，但这可能导致性能问题或bug！

⚙️ Key的工作原理

Key就像给每个列表项一个身份证号码：

列表项与Key的关系

key=”a001″

用户：张三

key=”a002″

用户：李四

key=”a003″

用户：王五

当列表改变时，React通过Key比对变化，只更新必要的部分。

🏷️ 如何选择Key的值

理想的Key应该满足：

唯一性 – 在列表中唯一
稳定性 – 不会改变（不是随机数）
可预测性 – 不是数组索引

最佳实践：

// 数据中有唯一ID
users.map(user =>
<UserItem key={user.id} user={user} />
)

// 没有ID时创建唯一值
items.map((item, index) =>
<Item key={`item-${index}`} … />
)

避免使用Math.random()生成key，这会导致不必要的重新渲染！

⚠️ 使用index作为Key的问题

数组索引作为Key是常见的反模式：

// 不推荐的做法！
items.map((item, index) => (
<div key={index}>{item}</div>
));

问题场景：

在列表头部添加元素时，所有元素的索引都会改变
导致React错误复用组件实例
可能引起状态混乱和性能问题

仅当以下情况可临时使用index：

静态列表（不会重新排序或增删）
列表项没有唯一ID

Key的重要性演示

✅ 正确使用Key

使用稳定ID作为Key：

const users = [
  {id: 101, name: ‘张三’},
  {id: 102, name: ‘李四’},
  {id: 103, name: ‘王五’}
];

return (
  <ul>
    {users.map(user => (
      <li key={user.id}>
        {user.name}
      </li>
    ))}
  </ul>
);

结果：高效更新，状态保持正确

❌ 错误使用Key

使用index作为Key：

const users = [
  {name: ‘张三’},
  {name: ‘李四’},
  {name: ‘王五’}
];

return (
  <ul>
    {users.map((user, index) => (
      <li key={index}>
        {user.name}
      </li>
    ))}
  </ul>
);

问题：在头部添加新项时，所有组件重新渲染，可能导致状态混乱

Key使用注意事项

🚫 Key应该放在哪里

Key应该直接放在map()方法返回的组件上：

// 正确位置
{listItems.map(item =>
  <ListItem key={item.id} … />
)}

// 错误位置！
{listItems.map(item =>
  <div>
    <ListItem key={item.id} … />
  </div>
)}

在上面的错误示例中，key放在了div上而不是ListItem上！

🌐 Key的作用范围

Key只需要在同级列表中保持唯一：

function Blog(props) {
  const sidebar = (
    <ul>
      {props.posts.map(post =>
        <li key={post.id}>
          {post.title}
        </li>
      )}
    </ul>
  );

  const content = props.posts.map(post => (
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  ));
}

sidebar和content中的key可以相同，因为它们在不同列表中。