关于React JSX组件与.map()方法的渲染规则疑问

直接给结论：你这个认知不完全对，React 并不会无差别遍历所有数组、对象查找里面的 JSX 元素渲染，它的处理逻辑是有明确边界的。

你写的示例代码能正常运行，核心原因是 App 组件最终返回的是一个全由合法 JSX 元素组成的数组，React 本身就支持将仅包含可渲染类型值的数组作为组件返回值，会直接按顺序渲染数组内的每一项，还会递归打平嵌套的数组结构，但普通对象完全不在自动处理范围内。

你可以通过几个反例验证这个规则：

• 如果你返回的数组里混入普通对象，比如写成 return [<li>测试</li>, { name: '测试' }]，React 会直接抛出「对象不能作为 React 子元素」的报错，不会主动过滤对象或者从对象里找 JSX。
• 如果你直接返回一个包含 JSX 属性的普通对象，比如 return { content: <li>测试</li> }，同样会触发上面的对象报错，React 根本不会遍历对象的属性查找可渲染内容。
• 如果是多层嵌套的数组，比如 return [[<li>1</li>], [<li>2</li>]]，React 会自动打平数组后正常渲染，这是唯一的例外情况，仅针对数组生效。

总结下来只有满足两个前提，数组里的 JSX 才会被自动渲染：

1. 这个数组是作为组件返回值、或者作为某个组件的 children 传入的
2. 数组递归打平后，所有元素都是 React 支持的可渲染类型：JSX 元素、字符串、数字、null、undefined、布尔值，不能包含普通对象

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