React中如何实现列表渲染？

处理数组数据并把它变成一列动态的DOM元素，这在前端开发里就像吃饭喝水一样常见。无论是用户列表、商品目录还是消息时间线，都需要列表渲染。在React里，这事儿主要靠数组的map方法，再加上一个关键的key属性。

用map方法把数据变成JSX

核心思想很简单：你有一个数据数组，用JavaScript的map方法遍历它，对数组里的每一项，都返回一段对应的JSX。最后，React会把这一组JSX渲染出来。

function TodoList() {
  const todos = ['写代码', '喝咖啡', '修bug'];
  return (
    <ul>
      {todos.map((todo, index) => (
        <li key={index}>{todo}</li>
      ))}
    </ul>
  );
}

上面的代码会把todos数组里的每个字符串，变成一个<li>元素。注意看，我们在<li>标签上加了一个key={index}属性，这个等会儿细说。

处理更复杂的数据对象

实际项目中，你的数据通常是一组对象。

const users = [
  { id: 1, name: '小明' },
  { id: 2, name: '小红' }
];
function UserList() {
  return (
    <div>
      {users.map(user => (
        <div key={user.id}>
          <span>{user.name}</span>
        </div>
      ))}
    </div>
  );
}

这里，我们用每个user对象的唯一属性id来作为key。为什么不用循环的index呢？我们马上聊。

key属性：不是摆设，是性能关键

你可能会觉得key就是个应付React警告的玩意儿。其实它很重要。React用它来识别列表中的每个元素。当列表的数据发生变化（比如增加、删除、排序）时，React会依靠key来判断哪个元素是新的、哪个被移除了、哪个只是移动了位置。

如果你用数组索引index当key，在列表中间插入一项时，后面所有项的索引都变了，React就会错误地认为很多元素都发生了变化，导致不必要的重新渲染甚至状态错乱。所以，只要可能，一定要用数据中稳定且唯一的标识作为key。

内联样式还是抽离组件？

当列表项的结构比较复杂时，一股脑全写在map里会让代码臃肿。一个好的做法是把单个列表项抽离成一个独立的组件。

function UserItem({ user }) {
  return (
    <div>
      <Avatar src={user.avatarUrl} />
      <span>{user.name}</span>
    </div>
  );
}
function UserList() {
  return users.map(user => <UserItem key={user.id} user={user} />);
}

这样，UserList组件清晰干净，UserItem组件可以独立维护甚至复用。key属性应该放在被map直接返回的组件上，也就是这里的<UserItem>。

说到底，列表渲染就是map函数加上用心管理的key。记住这个组合，你就能应付绝大多数动态列表的场景了。