React创建虚拟DOM的两种方式

第一种方式：使用js的方式创建

需要调用React.createElement()的方式进行创建。

React.createElement()

第一个参数：创建的标签；

第二个参数：标签的属性；

第三个参数：为第一个参数标签里的内容；

<div id='test'></div>
    <script type="text/babel">
        const vDom = React.createElement('h1',{id:'title'},'hello react')
        ReactDOM.render(vDom,document.getElementById('test'))
    </script>

使用js创建多个标签会很复杂，所以我们一般会采用第二种方式，也就是JSX的方式来创建。

使用js创建多个标签。

    <div id='test'></div>
    <script type="text/babel">
    const vDom = React.createElement('div',{id:'title'},
        React.createElement('h1','','div中的第一个h1'),
        React.createElement('h1','','div中的第二个h1'))
        ReactDOM.render(vDom,document.getElementById('test'))
    </script>

 

 注意：第二个参数在没有内容并且第三个参数有值的时候，第二个参数也要用‘’来占位，不能省略。

第二种方式：使用JSX的方式创建

<script type="text/babel">
    const vDom = (
        <div id="title">
            <span>hello react</span>    
        </div>
    )
    ReactDOM.render(vDom,document.getElementById('test'))
</script>

 使用JSX的方式的优点：

1.会比普通js创建开销小。

2.模块：向外提供特定功能的js程序，拆成模块，使用js得到简化，提高js 的运行效率。

3.组件：实现局部功能效果的代码或资源的集合，简化项目代码。