前端面试之组件化|原理篇 | 前端进阶之旅

⚡ 30 秒速记

核心判断：虚拟节点是对界面结构的描述，渲染器通过挂载与更新把声明式描述映射为宿主环境操作
原理主线：围绕「一、说一下对组件化的理解」、「二、JSX 本质是什么」、「三、JSX 和 vdom 的关系」建立输入、状态变化与输出之间的因果关系
文章范围：系统讲解了前端组件化的核心概念，包括组件的封装、复用方式、JSX 的本质与解析过程，帮助读者理解组件化开发在前端面试中的重要性及其实现原理。
边界与代价：key、节点类型和稳定序列决定复用边界；虚拟 DOM 解决可预测更新，不保证永远比手写 DOM 快
工程落地：性能分析要看实际提交次数、节点移动和组件边界，不能只用“减少 DOM 操作”解释

组件化就是把视图、数据和变化逻辑封装成独立单元，再通过 props 等明确接口实现复用。 在 React 中，JSX 只是语法糖，会被编译成虚拟节点描述；渲染时再把新旧节点映射为真实界面的挂载或更新。状态连续变化时，更新通常会被合并，避免每次修改都立即重渲染。需要注意原文的 ReactDOM.render 和 Vue 2 响应式属于历史实现，当前项目应按所用主版本判断具体链路。

这篇文章不要按 API 清单来背。先用上面的 Mind Map 建立全局结构，再通过交互 DEMO 观察正常路径和边界路径如何改变状态；阅读正文时重点核对每一步的输入、负责执行的参与者、产生的中间状态以及最终可观察结果。遇到版本敏感结论，要把“历史实现”“当前行为”和“工程兼容策略”分开说明；遇到性能或架构取舍，则用实际指标、失败现象和验证手段支撑判断。

版本校准： 本文出现 Object.defineProperty、Dep、Watcher 和双端 Diff 时，主要描述 Vue 2 实现；Vue 3 使用 Proxy、effect 与新的渲染器路径。Vue 2 已于 2023-12-31 结束维护，新项目应以 Vue 3 为基线，旧项目参考 Vue 2 EOL 官方说明制定迁移与安全策略。