React对JSX中嵌入数组的具体处理机制是什么？

问题 #

假设在React组件的render()方法中有一个名为items的数组，示例如下：

const items = this.state.toDoList.map((item) => (<li>{item}</li>));

组件的render()方法返回内容如下：

return (
  <div>
    <h1>My "To Do" List:</h1>
    <ul>{items}</ul>
  </div>
);

{items}语法在渲染时具体是如何被React处理的？因为items是JavaScript数组而非JSX，React在转译代码时是否类似使用扩展运算符...？

即使是更简单的场景，比如：

const test = ['a', 'b', 'c'];

返回：

return (<p>{test}</p>);

数组元素仍会被显示，尽管它们本身并非JSX。那么当React在JSX中看到被{}包裹的数组时，具体会执行什么操作？

回答 #

React处理JSX中{}包裹的数组时，会自动展开元素并依次渲染，不用手动加扩展运算符...，这是内置的逻辑，分两种场景具体说明：

1. 数组元素是JSX元素（ToDo列表场景） #

当items是map生成的<li>数组时，React会逐个提取数组里的JSX元素，把它们作为父组件（这里是<ul>）的子节点渲染。相当于React自动做了类似展开的操作，底层是处理虚拟DOM时直接遍历数组，将每个元素挂载到父节点下。

这里要注意，React要求数组里的每个JSX元素必须有唯一key属性，避免渲染性能问题和报错，正确写法应该是：

const items = this.state.toDoList.map((item) => (<li key={item.id}>{item}</li>));
// 优先用item自身的唯一标识当key，比如id，尽量别用数组索引

2. 数组元素是普通数据（字符串/数字等） #

如果数组里是字符串、数字这类可渲染的原始值，React会直接把数组元素拼接成字符串后渲染。比如['a','b','c']会被拼接成"abc"，作为<p>的文本内容显示。

要是数组里有null、undefined、false这类值，React会直接忽略，不会渲染任何内容，这个特性常用来做条件渲染。

底层逻辑简述 #

JSX最终会被Babel转译成React.createElement()调用，当转译{items}时，数组会被作为子节点参数传入。React创建虚拟DOM时会遍历这个数组，把每个元素转换成对应虚拟DOM节点，渲染真实DOM时就把这些节点依次插入父元素中。

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