React渲染列表疑问：为何两种写法一种失效一种正常？

先明确两种写法的核心差异，以及第一种失效的两个关键原因：

1. React组件返回内容的规则（针对旧版本React） #

如果你的React版本低于16.0，组件必须返回单个根元素，不能直接返回元素数组。第一种写法里，Todo组件返回的是list.map生成的<li>数组，不符合旧版本的要求，会直接触发渲染错误。而第二种写法中，Todo返回的是包裹着<li>数组的<ul>单个根元素，符合规则，所以能正常运行。

2. 列表元素必须带唯一key属性（全版本通用） #

即使你用的是React 16+（支持返回元素数组），第一种写法也会因为<li>缺少key属性导致异常。React渲染列表时，需要通过key来追踪每个列表项的身份，判断其是否需要更新、移动或删除。如果没有key，React会抛出严重警告，甚至导致列表渲染混乱、无法正常工作。

举个修复后的第一种写法示例，加上key就能正常运行：

// Todo组件（修复后）
function Todo({ list }) {
  return list.map(item => <li key={item}>{item}</li>);
}

补充说明 #

两种写法最终渲染出的DOM结构是一致的（都是<ul>包含多个<li>），但组件的返回结构必须符合React规则才是关键。第二种写法把<ul>放在Todo组件内，用单个根元素包裹了列表项，既避免了数组返回的限制，同时如果没加key只会触发警告而非直接报错，所以能正常运行。不过建议不管哪种写法，列表项都要加上唯一的key。

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