React 中 为什么多个 JSX 标签必要被一个父元素包裹？

为什么多个 JSX 标签必要被一个父元素包裹？

JSX 固然看起来很像 HTML，但在底层着实被转化为了 JavaScript 对象，你不能在一个函数中返回多个对象，除非用一个数组把他们包装起来。这就是为什么多个 JSX 标签必须要用一个父元素大概 Fragment 来包裹。
假造 DOM 和渲染服从
React 利用 假造 DOM（Virtual DOM）来优化 UI 更新。假造 DOM 是对实际 DOM 树的一个轻量级表现，每次组件更新时，React 会先通过假造 DOM 对比（称为 “reconciliation”）找出实际 DOM 必要变动的地方，之后只更新必要改变的部门。
为了可以或许高效地举行这一步调**，React 必要确保每次渲染返回的元素能被精确地表现为一个单一的树布局**。假如返回多个不被包裹的元素，React 无法确定它们如安在假造 DOM 树中嵌套和排序，从而无法举行高效的 diff 算法对比。
规范化假造 DOM 树
React 的假造 DOM 对比是基于组件的布局化树举行的。假如一个组件返回多个兄弟元素，React 就无法在这些元素之间创建清楚的父子关系。为了克制这个标题，React 要求每个组件的返回值必须只有一个根元素。
性能优化
假如没有一个父元素，React 在更新和渲染多个兄弟元素时将必要举行更多的利用，大概会影响性能。通过逼迫要求只有一个根元素，React 可以或许更有效地管理组件的更新，克制不须要的渲染和布局变动。