答案：通过虚拟DOM、Diff算法与Proxy响应式系统实现声明式渲染。用纯函数组件描述UI，状态变化时自动最小化更新视图，核心为vnode生成、比对与副作用追踪。
构建一个不依赖框架的声明式 JavaScript 渲染引擎，核心在于将 UI 视为状态的函数，并通过观察状态变化自动更新视图。不需要 React 或 Vue 这样的库，你可以用原生 JavaScript 实现类似的理念。
理解声明式渲染的核心思想
声明式意味着你描述“UI 应该是什么样”，而不是一步步命令“如何创建或修改 DOM”。比如：
{ user: { name: 'Alice' } } →当数据变化时，理想情况下你只需更新数据，UI 自动重渲染。实现这一点的关键是：
- 将组件定义为纯函数，输入状态，输出虚拟 DOM 结构
- 对比新旧结构，最小化实际 DOM 操作
- 响应状态变化自动触发重渲染
设计轻量级虚拟 DOM 和 Diff 算法
虚拟 DOM 是 JS 对象，用来描述真实 DOM。例如：
立即学习“Java免费学习笔记（深入）”；
{ 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 会自动重新渲染
封装组件与 JSX 替代语法
虽然不用框架，但可以模拟组件模式。组件是一个函数，接收 props 返回 vnode：
function Button(props) {return h('button', { onclick: props.onClick }, props.children);
}
你可以手写 h() 函数作为 createElement 的别名，或者配合 Babel 使用类似 JSX 的语法（转换成 h() 调用）。
支持嵌套组件：在 diff 过程中，如果 vnode.type 是函数，就调用它得到真正的 vnode 再处理。
基本上就这些。一个轻量、声明式的渲染引擎，本质就是：vnode 描述 UI + diff 更新 DOM + 响应式驱动自动重渲染。不复杂，但容易忽略细节如事件绑定、属性同步、文本节点处理等。逐步完善这些边界情况，就能构建出稳定可用的迷你引擎。
