React列表渲染的两种方式：哪种更合适且属于常规用法？

这两种都是React社区里的常规用法，没有绝对的优劣，主要看你的场景复杂度：

1. 先声明变量再渲染（const方式） #

适合处理复杂逻辑的列表——比如map回调里有条件判断、多层嵌套元素，或者这个列表需要在多个地方复用的时候。把map结果抽成变量，能让JSX结构更干净，也方便单独调试这个列表的生成逻辑。

示例代码：

const userList = users.map(user => {
  // 额外逻辑处理
  const displayName = `${user.firstName} ${user.lastName}`;
  // 条件渲染内容
  const adminBadge = user.isAdmin ? <span className="admin-tag">管理员</span> : null;
  
  return (
    <li key={user.id}>
      {displayName}
      {adminBadge}
    </li>
  );
});

return <ul>{userList}</ul>;

2. 直接在JSX内部map #

适合简单场景——比如只是渲染基础的列表项，没有额外复杂逻辑。这种写法更紧凑，能直接在JSX结构里看到列表和父元素的关系，代码简洁直观。

示例代码：

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

总结 #

• 简单列表直接内嵌map是最常用的写法，清爽高效；
• 逻辑复杂的列表，优先把map结果抽成变量（甚至进一步拆成单独的列表项组件），能大幅提升代码可读性和可维护性。

内容的提问来源于stack exchange，提问作者Nestor Mancilla