React/TypeScript中渲染组件数组的两种方案哪种为最佳实践？

两种写法在React语法层面都是合法可运行的，但90%以上的常规业务场景下，你当前采用的「存储纯props对象数组、遍历时动态构造JSX组件」是更优的通用实践，直接存储JSX元素的方案仅适合极少数特定场景。

优先选择props对象数组方案的核心原因 #

• 符合数据与视图分离的设计原则。数组里存储的是可序列化的纯业务数据，你可以很方便的对数据做排序、筛选、修改、本地持久化、跨层传递等操作，不会和React的渲染逻辑耦合。如果直接存储JSX元素，元素本身是携带大量React内部属性的特殊对象，既不能序列化存储，也没法直接基于业务字段做数据处理，后续要调整字段内容还要回溯到JSX构造的位置修改，维护成本很高。
• 渲染灵活度更高。后续如果要做渲染逻辑调整——比如根据todo状态切换不同的卡片组件、PC/移动端适配不同样式的组件、给不同优先级的todo加不同的外层包裹，只需要修改map回调里的渲染逻辑即可，底层存储的业务数据完全不需要改动。如果提前把JSX元素写死在数组里，这类调整就要改动数组的构造逻辑，耦合度太高。
• 性能表现更可控。React的重渲染Diff机制依赖props的引用比对，存储纯数据时，只要业务字段没变化，React可以精准识别不需要重渲染的子组件。如果提前构造JSX元素存在数组里，父组件重渲染时很容易出现JSX元素引用意外变化的问题，反而会触发不必要的子组件重渲染。

什么时候可以用直接存JSX元素的方案？ #

只有当你要渲染的这组组件是完全静态、无动态数据依赖、后续不需要做任何数据层面的调整时，才适合用这种写法。比如渲染一组写死的静态操作按钮、固定的页脚链接列表，这种场景下直接存JSX元素可以少写一层map转换，代码更直接。

额外注意点 #

你贴的示例代码有两个小问题，实际写的时候要修正：

1. map回调如果用花括号包裹函数体，必须手动return要渲染的JSX，不然会返回undefined导致渲染空白；如果是单返回值可以省略花括号做隐式返回
2. 列表渲染一定要给每一项的根组件加唯一的key属性，不然React会抛出渲染警告，也会影响列表更新时的性能
   修正后的参考代码：

// 先单独定义数据类型，后续复用更方便
type Todo = {
  id: string; // 最好用唯一id当key，不要用index或者可能重复的title
  title: string;
  content: string;
}
const todos: Todo[] = [];

// 隐式返回写法
todos.map(todo => <TitleCard key={todo.id} title={todo.title} content={todo.content} />)

// 花括号+显式return写法
todos.map(todo => {
  // 这里可以加各种条件判断、逻辑处理
  return <TitleCard key={todo.id} title={todo.title} content={todo.content} />
})

内容的提问来源于stack exchange，提问作者oscar-lauth