实现自己的React之渲染原生DOM

type

status

date

slug

summary

前言

之前我们已经用比较规范的方式实现了字符串和数字的渲染，接下来我们将渲染原生 DOM。

预备知识

正则

我们在匹配事件和 style 属性的时候，我们需要用到简单的正则知识点

[A-Z] 大写字母

^ 以**开头

除了使用正则的 test 判断以外，我们还可以和String.place搭配使用。注意：这个方法不会改变原字符串。

jquery 事件的命名空间和事件代理

在元素创建的时候，我们会在 document 上采用事件委托绑定事件（后面会解释原因），元素移除的时候我们还要移除事件。为了简便操作我们会用命名空间来实现。

原理分析

我们在写 React 的代码的时候，我们一般会写 JSX.而在我们的现在开发中，会经过 babel 等转换为 React.createElement 代码。这也就是 JSX 的作用，简单可以理解为 React.createElement 的语法糖。

我们用下面的代码示例

而如果我们直接在代码中打印这个 element 会是什么样子呢？代码可以看这里

可以看到，打印出来是一个对象，里面有$$typeof、key、type、props 等等很多属性。而我们需要关注的是 type 属性和 props 属性，甚至可以可以看到，props 里面有个 children 属性，而且可以继续展开，里面就是层层递进的 children 子元素。其实这个对象就是虚拟 DOM，在后面更新的时候我们也会说到。

至此我们也有了一个大概的流程。

和之前的字符串的渲染对比得知，我们这次渲染的是 React.createElement 的返回值，它的返回值是一个实例，我们现在称为 Element 实例。

动手实现

经过上述的分析，我们得到此次渲染原生 DOM 我们需要做的事情后大致如下

我们这次渲染的代码为

createElement

我们在 react 文件夹新建 element.js，这个函数的作用就是根据将所有传入的参数实例化，返回一个对象代码如下：

再在 react/index.js 引入 createElement，方便调用。

createUnit

createElement 函数调用完成之后，我们就要进入 createUnit 工厂函数来进行判断生成实例

这个地方我们要注意，这个时候的 element 是 Element 的实例，因此我们可以用 instanceof，而且渲染的都是原生的 DOM，因此 tag 名称都是字符串，我们可以使用 element.type 辅助判断。

NativeUint

经过 createUnit 工厂函数之后我们就要生成 NativeUint 了，我们写一个 NativeUint 的 class。我们仍然是继承了 Unit，将元素存到了 this._currentElement

调用实例 getMarkUp

在这一步我们需要调用 getMarkUp。我们先想想我们这个步骤的大概流程。

我们之前说过，我们的 getMarkup 函数需要传入一个

key

，然后返回一个

字符串

。对这就是最直观的理解，而返回的字符串可能就是下面的样子。

我们最终需要的字符串大概为：

，包含了一个闭合的 tag，上面还有一些属性，我们就需要遍历添加属性，还要添加对应的唯一 id，还要对 children 子元素做处理。

我们理一下：

原生 DOM,要根据渲染对应的 tag

style 等 css 处理

class 等属性梳理

事件绑定 为什么要事件委托，因为开始的时候元素还只是个字符串，无法绑定事件

children 的处理

其他属性

我们添加 getMarkup 函数，现在我们讲解这部分代码。

最后渲染

结语

顺着以上的思路，我们成功渲染了原生 DOM,事件、样式、类名等等都一一成功渲染出来。而原生 DOM 的渲染看起来还是有点点复杂，就是深度优先，直接递归，直到没有元素方才完成使命。

本节代码地址：代码地址

今天，我们成功完成了原生 DOM 的渲染，接下来我们将处理 Class Component，敬请期待吧！