前言

工作中经常使用react，对于react中的一些虚拟DOM、生命周期、组件等概念知其然，不知其所以然。虽然知道这些怎么用的就足够应付大部分的工作，但是作为一个开发者，还是要有追求的。所以有了这个系列，一步一步实现一个简单的react出来。

语法糖JSX

我们平时在react中写的JSX，其实是一种语法糖，会被babel转换成React.createElement()。我们可以在babel官网上做个实验，看下JSX会被babel转换成什么。下面是个简单的例子。

我们可以看到，JSX会被转成React.createElement(tag, attrs, child1, child2, ...)这种形式。那我们只要装个babel插件，然后写个createElement方法就可以处理JSX代码了。

createElement方法和虚拟DOM

• 准备

首先安装babel模块，babel的.babelrc配置如下：

{"presets": ["env"],"plugins": [["transform-react-jsx",{"pragma": "React.createElement"}]]
}
复制代码

使用打包工具parcel，webpack也可以。比较懒，使用了parcel来打包代码。

• 实现

上面我们已经提到了JSX会被babel转换为React.createElement(tag, attrs, child1, child2, ...)。
第一个参数：是元素的标签名，可以是div、span等。
第二个参数：是元素的属性名，可以是className、onClick等。
之后的参数，是元素的子节点。
所以我们实现一个函数createElement，接受上面的参数，然后将这些参数返回就可以了。

const createElement = (tag, attrs, ...childs) => {return { tag, attrs, childs }
}
复制代码

看下效果如何。

const React = {createElement
}const title = (<div className="title"><p>Hello, world!</p></div>
)
console.log(title)
复制代码

打开Chrome的控制台，我们可以看到差不多是我们想要的。

createElement方法返回的对象就是虚拟DOM，这个对象中记录了该DOM节点的所有信息，根据这些信息我们可以将虚拟DOM转化为真实的DOM。

将虚拟DOM渲染成真实DOM

在react中，将vdom渲染成真实的DOM，我们使用的是ReactDOM.render，像这样。

ReactDOM.render(<div>Hello, world!</div>, // 这个会被转化为vdomdocument.getElementById('root') // 获取根节点
)
复制代码

我们可以看出，render实现的功能是将vdom转化为真实的dom，挂载到根节点上。明白这一点，代码就很好写了。

const ReactDom = {render
}
// 将 vdom 转换为真实 dom
const render = (vdom, root) => {if (typeof vdom === "string") {// 子元素如果是字符串，直接拼接字符串root.innerText += vdomreturn}const dom = document.createElement(vdom.tag)if (vdom.attrs) {for (let attr in vdom.attrs) {const value = vdom.attrs[attr]setAttribute(dom, attr, value)}}// 遍历子节点vdom.childs.forEach(child => render(child, dom))// 将子元素挂载到其真实 DOM 的父元素上root.appendChild(dom)
}
// 设置 dom 节点属性
const setAttribute = (dom, attr, value) => {if (attr === "className") {attr = "class"}// 处理事件if (/on\w+/.test(attr)) {attr = attr.toLowerCase()dom[attr] = value || ""} else if (attr === "style" && value) {// 处理 style 样式，可以是个字符串或者对象if (typeof value === "string") {dom.style.cssText = value} else if (typeof value === "object") {for (let styleName in value) {dom.style[styleName] =typeof value[styleName] === "number"? value[styleName] + "px": value[styleName]}}} else {// 其他属性dom.setAttribute(attr, value)}
}
复制代码

这样我们就将虚拟dom渲染成真实的dom，考虑到热更新，我们需要在render之前先清除下root节点下的内容。

const ReactDOM = {render: (vdom, root) => {root.innerText = ""render(vdom, root)}
}
复制代码

总结

在react中，jsx会被babel转化为React.createElement(标签、属性、子元素1、子元素2、...)形式，该函数返回一个对象，即虚拟dom。然后ReactDOM.render()，会将虚拟dom转化为真实的dom。
附上本文代码地址