React入门系列教程（一）使用React.createElement创建HTML元素

React是什么？文字上最准确的定义就是官方文档，请自行查阅。

让我们马上上手来用下React。

有一个<div>标签，要求用JavaScript在这个标签里显示一段文字，如何做呢？原生的做法如下：

<div id="rootElement"></div>
<script type="text/javascript">
    const rootElement = document.getElementById('rootElement')
    const divElement = document.createElement('div')
    divElement.textContent = 'du1dume'
    divElement.className = 'container'
    rootElement.appendChild(divElement)
</script>

入门系列吗，简单解释两句。先从html中获得root元素，再创建个div元素，把这个div元素的textContent属性赋值为随便什么文字，把这个div元素的className属性赋值为container，最后把这个div元素添加到root元素中，齐活！

下面我们来看看用React怎么实现。

其实和原生的实现非常类似，也是有个createElement方法用来创建一个元素，然后给这个元素的属性赋值，唯一的不通就在最后一步显示它的时候，原生的做法是用appendChild添加到页面中，而React提供了一个render方法把它添加到页面中。

首先，我们得把React引入到页面中，共两个js文件，如代码所示：

<div id="rootElement"></div>
<script src="https://unpkg.com/react@16.8.3/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.8.3/umd/react-dom.production.min.js"></script>

然后，我们来看看如何创建一个新的div，并显示出来。如代码所示：

<div id="rootElement"></div>
<script src="https://unpkg.com/react@16.8.3/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.8.3/umd/react-dom.production.min.js"></script>
<script type="text/javascript">
    /*这里还是获取根元素，没有变化*/
    const rootElement = document.getElementById('rootElement')
    
    const divElement = React.createElement(
        'div',/*创建的是个div元素*/
        {className: 'container'},/*为div元素的className属性赋值*/
        'du1dume',/*相当于原生的做法，为textContent属性赋值*/
        'du1dume2'
    )
    
    /*这里相当于原生的appendChild方法，把divElement添加到rootElement中*/
    ReactDOM.render(divElement, rootElement)
    
    /*打印div元素*/
    console.log(divElement)
</script>

那么原生js创建的div和React创建的div有不同吗？我们已在render方法下面加了一行打印对象的代码，打印结果如图1

图1

我们看到这个对象有一些属性，其中最重要的就是props属性。props中又有两个子属性，其中children属性的值就是我们要显示的文字，也就是React.createElement方法中的最后一个参数；而className属性就是我们传入的第二个参数，值为container。

实际上，我们可以给React.createElement方法传入任意多的参数，譬如：

const divElement = React.createElement(
    'div',/*创建的是个div元素*/
    {className: 'container'},/*为div元素的className属性赋值*/
    'du1dume',/*相当于原生的做法，为textContent属性赋值*/
    'du1dume2'/*又添加了一个参数*/
)

刷新页面我们再来看看打印的结果是什么，props属性的children属性变成了一个Array，里面有两个元素，顺序存放着我们传递的文字参数；既然如此，根据打印出来的信息，我们换一种传递文字参数的形式，代码如下：

const divElement = React.createElement(
    'div',/*创建的是个div元素*/
    {
        className: 'container',/*为div元素的className属性赋值*/
        children: ['du1dume', 'du1dume2']/*添加页面显示的文字信息*/
    }
)

或者：

const divElement = React.createElement(
    'div',/*创建的是个div元素*/
    {
        className: 'container',/*为div元素的className属性赋值*/
        children: 'du1dume'/*添加页面显示的文字信息*/
    }
)

刷新页面看看打印结果。这就是React.createElement方法，首先传入你想创建的元素的字符串形式，然后传入一个对象，这个对象中有很多属性可以使用，这个对象本身其实就是你所要创建元素的props属性。至于传多个参数，看你方便。