React函数组件循环渲染应写在return语句内还是外？

渲染动态JSX的两种常用写法没有绝对的对错，选哪种完全看当前组件的逻辑复杂度和代码组织需求，没有放之四海而皆准的"最优解"。

首先提一句你给出的第二个示例有两个容易踩的小问题：一是变量名和原数组重名会触发引用错误，二是return的时候直接写{collections}不符合JSX语法，正确的参考写法如下：

function DisplayCollections() {
  // 变量名和原数据做区分，避免覆盖
  const collectionOptions = collections.map((collection, index) => {
    return (
      <option value={collection.id} key={index}>
        {collection.name}
      </option>
    );
  });
  // 要包在JSX片段里返回，不能直接返回对象
  return <>{collectionOptions}</>
}

两种写法的适用场景 #

• 直接在return的JSX结构内写遍历/条件逻辑
  适合渲染逻辑极简单的场景：比如只是单纯遍历数组渲染基础标签，没有额外的数据处理、没有嵌套的条件判断、不需要复用生成的节点。
  这种写法的好处是代码足够紧凑，读代码的时候顺着JSX结构就能直接看到渲染逻辑，不用跳来跳去找中间变量的定义。但要注意如果逻辑嵌套超过两层（比如map里套三元判断再套一层遍历），就别硬塞在JSX里，不然最后JSX会挤成一团，改bug的时候找半天找不到对应逻辑。
• 提前声明变量存储生成的JSX，再放到结构里返回
  适合以下几类场景：
  • 渲染前要对数据做额外处理：比如遍历前要先过滤掉无权限的项、给展示文本做格式化、根据状态判断节点是否禁用
  • 生成的JSX节点需要在组件内多处复用：比如同一组选项在下拉选择器和筛选面板里都要用到
  • 组件主结构层级很深：提前把动态渲染的部分拆成变量，可以让return里的主JSX只保留布局骨架，不会被大段遍历逻辑冲得看不出结构
    这种写法的好处是逻辑分层清晰，后续修改渲染规则的时候直接找对应的变量就行，不用在大段嵌套的JSX里翻代码。

通用实践参考 #

• 可读性永远是第一优先级，不要为了少写两三行代码，把复杂的处理逻辑全堆在JSX的花括号里
• 遍历列表的时候尽量不要用数组下标当key，除非你能保证这个列表永远不会做排序、插入、删除操作，否则很容易出现组件状态错乱的问题，优先用数据项自带的唯一ID当key
• 如果单段动态渲染逻辑超过10行，不管用哪种写法，都建议抽成独立的子组件或者渲染函数，别全堆在一个组件里
• 存储生成JSX的中间变量不要和原数据同名，比如原数组叫collections，生成的选项节点就叫collectionOptions，避免变量覆盖引发的报错。

内容的提问来源于stack exchange，提问作者Karthik Priyadarshan