您现在的位置是：亿华云 > 人工智能

手写简易前端框架：Vdom 渲染和 jsx 编译

亿华云2025-10-08 23:20:26【人工智能】0人已围观

简介作为前端工程师，前端框架几乎每天都要用到，需要好好掌握，而对某项技术的掌握程度可以根据是否能实现一个来判断。手写一个前端框架对更好的掌握它是很有帮助的事情。现代前端框架经过多年的迭代都已经变得很复杂，

作为前端工程师，手写前端框架几乎每天都要用到，简易需要好好掌握，前端而对某项技术的框架掌握程度可以根据是否能实现一个来判断。手写一个前端框架对更好的渲染掌握它是很有帮助的事情。

现代前端框架经过多年的编译迭代都已经变得很复杂，理清它们的手写实现原理变得困难重重。所以我想写一个最简单版本的简易前端框架来帮助大家理清思路。

一个完整的前端前端框架涉及到的内容还是比较多的，我们一步步的框架来，这篇文章来实现下 vdom 的渲染渲染。

vdom 的编译渲染

vdom 全称 virtual dom，用来声明式的手写描述页面，现代前端框架很多都基于 vdom。简易前端框架负责把 vdom 转为对真实 dom 的前端增删改，也就是 vdom 的亿华云计算渲染。

那么 vdom 是什么样的?又是怎么渲染的呢?

dom 主要是元素、属性、文本，vdom 也是一样，其中元素是 { type、props、children} 的结构，文本就是字符串、数字。

比如这样一段 vdom：

{

type: ul,

props: {

className: list

children: [

{

type: li,

props: {

className: item,

style: {

background: blue,

color: #fff

onClick: function() {

alert(1);

}

children: [

aaaa

]

{

type: li,

props: {

className: item

children: [

bbbbddd

]

{

type: li,

props: {

className: item

children: [

cccc

]

}

]

}

不难看出，它描述的是一个 ul 的元素、它有三个 li 子元素，其中第一个子元素有 style 的样式、还有 onClick 的事件。

前端框架就是通过这样的对象结构来描述界面的，云南idc服务商然后把它渲染到 dom。

这样的对象结构怎么渲染呢?

明显要用递归，对不同的类型做不同的处理。

如果是文本类型，那么就要用 document.createTextNode 来创建文本节点。如果是元素类型，那么就要用 document.createElement来创建元素节点，元素节点还有属性要处理，并且要递归的渲染子节点。

所以，vdom 的 render 逻辑就是这样的：

if (isTextVdom(vdom)) {

return mount(document.createTextNode(vdom));

} else if (isElementVdom(vdom)) {

const dom = mount(document.createElement(vdom.type));

for (const child of vdom.children) {

render(child, dom);

}

for (const prop in vdom.props) {

setAttribute(dom, prop, vdom.props[prop]);

}

return dom;

}

文本的判断就是字符串和数字：

function isTextVdom(vdom) {

return typeof vdom == string || typeof vdom == number;

}

元素的判断就是对象，并且 type 为标签名的字符串：

function isElementVdom(vdom) {

return typeof vdom == object && typeof vdom.type == string;

}

元素创建出来之后如果有父节点要挂载到父节点，组装成 dom 树：

const mount = parent ? (el => parent.appendChild(el)) : (el => el);

所以，完整的 render 函数就是这样的：

const render = (vdom, parent = null) => {

const mount = parent ? (el => parent.appendChild(el)) : (el => el);

if (isTextVdom(vdom)) {

return mount(document.createTextNode(vdom));

} else if (isElementVdom(vdom)) {

const dom = mount(document.createElement(vdom.type));

for (const child of vdom.children) {

render(child, dom);

}

for (const prop in vdom.props) {

setAttribute(dom, prop, vdom.props[prop]);

}

return dom;

}

};

其中，元素的 dom 还要设置属性，站群服务器比如上面 vdom 里有 style 和 onClick 的属性要设置。

style 属性是样式，支持对象，要把对象合并之后设置到 style，而 onClick 属性是事件监听器，用 addEventListener 设置，其余的属性都用 setAttribute 来设置。

const setAttribute = (dom, key, value) => {

if (typeof value == function && key.startsWith(on)) {

const eventType = key.slice(2).toLowerCase();

dom.addEventListener(eventType, value);

} else if (key == style && typeof value == object) {

Object.assign(dom.style, value);

} else if (typeof value != object && typeof value != function) {

dom.setAttribute(key, value);

}

就这样，vdom 的渲染逻辑就完成了。

用上面那段 vdom 渲染试下效果：

render(vdom, document.getElementById(root));

vdom 的渲染成功!

小结一下：

「vdom 会递归的进行渲染，根据类型的不同，元素、文本会分别用 createTextNode、createElement 来递归创建 dom 并组装到一起，其中元素还要设置属性，style、事件监听器和其他属性分别用 addEventListener、setAttribute 等 api 进行设置。」

「通过不同的 api 创建 dom 和设置属性，这就是 vdom 的渲染流程。」

但是，vdom 写起来也太麻烦了，没人会直接写 vdom，一般是通过更友好的 DSL(领域特定语言) 来写，然后编译成 vdom，比如 jsx 和 template。

这里我们使用 jsx 的方式，因为可以直接用 babel 编译。

jsx 编译成 vdom

上面的 vdom 改为 jsx 来写就是这样的：

const jsx =

alert(2)}>aaa

bbbb

cccc

render(jsx, document.getElementById(root));

明显比直接写 vdom 紧凑了不少，但是需要做一次编译。

配置下 babel 来编译 jsx：