当前位置：首页 > 文章列表 > 文章 > 前端 > 不依赖框架的JS声明式渲染指南

不依赖框架的JS声明式渲染指南

2025-10-09 08:54:32 0浏览收藏

## 不依赖框架的声明式 JS 渲染引擎构建指南：打造高性能 Web 应用还在为 React、Vue 等框架的体积和学习成本烦恼吗？本文将带你深入了解如何构建一个不依赖任何框架的声明式 JavaScript 渲染引擎，实现高性能 Web 应用。**核心在于虚拟DOM、Diff算法和Proxy响应式系统**。通过纯函数组件描述UI，当状态变化时，引擎会自动进行最小化视图更新，无需手动操作DOM。本文将详细介绍vnode生成、比对以及副作用追踪等关键步骤，让你掌握**声明式渲染的核心思想**，轻松打造轻量级、高性能的渲染引擎。告别框架依赖，拥抱原生 JavaScript 的强大力量，提升你的 Web 开发效率！

答案：通过虚拟DOM、Diff算法与Proxy响应式系统实现声明式渲染。用纯函数组件描述UI，状态变化时自动最小化更新视图，核心为vnode生成、比对与副作用追踪。

如何构建一个不依赖框架的、声明式的 JavaScript 渲染引擎？

构建一个不依赖框架的声明式 JavaScript 渲染引擎，核心在于将 UI 视为状态的函数，并通过观察状态变化自动更新视图。不需要 React 或 Vue 这样的库，你可以用原生 JavaScript 实现类似的理念。

理解声明式渲染的核心思想

声明式意味着你描述“UI 应该是什么样”，而不是一步步命令“如何创建或修改 DOM”。比如：

{ user: { name: 'Alice' } } →

Hello, Alice

当数据变化时，理想情况下你只需更新数据，UI 自动重渲染。实现这一点的关键是：

将组件定义为纯函数，输入状态，输出虚拟 DOM 结构
对比新旧结构，最小化实际 DOM 操作
响应状态变化自动触发重渲染

设计轻量级虚拟 DOM 和 Diff 算法

虚拟 DOM 是 JS 对象，用来描述真实 DOM。例如：

{ type: 'div', props: {}, children: ['Hello'] }

写一个函数将它转为真实节点：

createElement(node)：递归创建 DOM 节点，处理文本、属性和子元素。

再写一个 render(newVNode, container) 函数，首次渲染直接挂载。后续调用时，与上一次的 vnode 做对比（diff），只更新变化的部分。

简化 diff 策略（适用于小型引擎）：

节点类型不同？直接替换
类型相同但文本？更新 textContent
元素相同？遍历子节点，按索引比对（不考虑 key 优化）
更新属性（新增、删除、修改）

实现响应式状态系统

让数据变化自动触发渲染。最简单方式是使用 Proxy 监听对象属性访问和修改：

创建一个 observable(data) 函数，返回被 Proxy 包裹的对象。每次属性被读取时，记录哪个渲染函数依赖它；被修改时，通知所有依赖重新执行。

结合一个 effect(fn) 函数，在其执行期间触发的 getter 都被收集为依赖。这样，每个组件渲染就是一个 effect。

示例流程：

const state = observable({ count: 0 });
effect(() => {
const vdom = h('div', null, `Count: ${state.count}`);
render(vdom, container);
});
// 修改 state.count 会自动重新渲染