分析React、Vue组件为什么必须只能有一个根元素

为什么平时在开发react或者vue组件写jsx或者template的时候，框架都要求必须只能有一个根元素？现在就来分析一下

其实，这个要求在react和vue中的原理是一样的，分别举例说明一下：

React

平时定义组件的时候我们都会这样写：

class App extends React.Component {
    render(){
        return (
            <div>
                <h1 className="title">我是标题</h1>
                <p>我是内容</p>
            </div>
        )
    }
}

组件中的render函数中的jsx最终会被编译成React元素的形式：

class App extends React.Component {
    render(){
        return React.createElement(
            'div', 
            null, 
            [React.createElement('h1', { className: 'title' }, '我是标题'),
            React.createElement('p', null, '我是内容')]
        )
    }
}

Vue

vue在定义组件template的时候，会是如下写法：

<template>
    <div>
        <h1 class="title">我是标题</h1>
        <p>我是内容</p>
    </div>
</template>

而vue的template模板最终也会被编译为render函数，即：

render(createElement){
    return createElement(
        'div',
        null,
        [createElement(
            'h1',
            {
                class: 'title'
            },
            '我是标题'
        ),
        createElement(
            'p',
            null,
            '我是内容'
        )]
    )
}

通过这两个例子可以看出，不管是vue还是react，模板都将被编译为render函数，而函数的返回值只能是一个，所以如果不用单独的根节点包住，就会并列返回多个返回值，这在js中是不允许的。

除了这一点，还有一个主要是原因是，react和vue都将把模板的内容转换为对应的元素，最后建立起虚拟dom树，而树状结构只能有唯一的根节点，这样在后续的虚拟dom数据有变化时，可以检查到具体更改额位置。如果有多个根节点，则不能明确到底要在哪个树上查找更新。

赏

谢谢你请我吃糖果