迷你React手写系列-React基本概念

在我学习React的过程中，我们经常会碰到一些核心的概念，例如JSX、ReactElement等，这些概念围绕着React学习的整个周期，尽管我们平时是针对一些业务开发，理解源码底层原理也能帮助我们更清晰地认识到React的设计思路，因此本迷你React手写系列对React基础底层原理进行拆解，用原生JavaScript实现一个迷你React，帮助大家理解。

下面的三行代码可能是我们接触React过程的第一步：

js 复制代码

const element = <div className="foo">Hello World</div>
const container = document.getElementById('root')
ReactDOM.render(element, container)

其中第一行定义了一个React元素，第二行从DOM中获取id为root的容器，第三行通过ReactDOM的render方法将React元素渲染到容器内。这里的第一行我们在JavaScript代码中使用了HTML代码结构，这就是JSX（JavaScript XML）语法结构，由于JSX作为语法糖，不是原生JavaScript，因此我们需要通过Babel编译器将JSX语法代码编译为JavaScript代码，如下所示，转换为React.createElement()形式，用于生成描述DOM的虚拟对象ReactElement。

js 复制代码

const element = React.createElement('div', {className: 'foo'}, 'Hello World')

然后React.createElement()返回一个对象。

js 复制代码

const element = {
    type: 'div',
    props: {
        className: 'foo',
        children: 'Hello World'
    }
}

通过element.type我们可以创建一个DOM元素：document.createElement(element.type)，这里是作为我们要创建的DOM元素的类型，但是在后面介绍中（函数组件），其可以作为函数组件的函数。props则我们的HTML元素的所有属性键值（除了children作为其子节点）。children属性下的子节点和父节点嵌套的形式则构成了树。

render函数用于react改变DOM,将我们的ReactElement对象映射为真实DOM，其初步实现是创建DOM节点，然后给DOM节点属性赋值，如下所示：

js 复制代码

const node = document.createElement(element.type)
node.className= element.props.class

然后我们再创建子节点的DOM元素。由于其内部为文本，因此我们创建文本节点。

js 复制代码

const text = document.createTextNode("")
text["nodeValue"] = element.props.children

最后将文本节点添加到父节点中，父节点添加到容器中。

js 复制代码

node.appendChild(text)
container.appendChild(node)

通过使用原生JavaScript方式实现，现在我们就有了一个类似的迷你React代码结构了。