Web Components：原生组件化开发新趋势，一个北漂程序员的“回流”思考

去年十月的一个深夜，我坐在成都温江一间35平米的出租屋里，窗外是稀疏的车流声和远处工地打桩机的闷响。老婆已经睡了，我却还在调试一段 React 组件——它在 Safari 上莫名其妙地白屏，而在 Chrome 里跑得飞起。凌晨一点四十七分，我的 MacBook 风扇呼呼作响，像极了当年在北京挤10号线时地铁空调的轰鸣。

我突然愣住了。

那一刻，我想起了三年前那个暴雨倾盆的晚上，在北京回龙观地铁站口，我抱着笔记本淋着雨等末班车，只为赶在第二天晨会前修好那个“神秘崩溃”的 UI 库。房贷每月9800元，房租4200元，通勤单程1小时45分钟……那会儿我月薪15k，扣完五险一金和个税，到手不到11000，但光交通+吃饭就得4000块。老婆总说：“要不咱们回成都吧？生活成本低点，压力小点。”

我嘴上硬撑：“北京机会多啊，技术前沿，大厂多，涨薪快。”可心里清楚，所谓“前沿”，很多时候不过是被卷到连轴转，连学新技术都成了奢侈。

直到去年三月，公司裁员潮波及我们组，我被迫“优化”。那天走出写字楼，阳光刺眼，我站在国贸桥下点了根烟——其实我不抽烟，就是想找个理由站一会儿。HR 临走前说：“你 React 写得不错，简历很亮眼。”可我知道，那套 React 技术栈，是我熬了无数个夜、掉了不知多少头发才堆起来的护城河。

回成都后，我差点被“现代前端”甩下车

回成都后，我很快找到了一份本地工作，月薪从15k降到了12k，但房租只要3500，通勤20分钟骑共享单车。生活节奏慢了下来，焦虑却没少——因为技术栈，好像跟不上了。

新项目用的是 Vue 3 + Vite，而我过去五年几乎只写 React。更尴尬的是，团队里两个00后实习生，张口闭口“微前端”、“Web Components 原生支持”、“自定义元素生命周期”，我听着像听天书。有一次 code review，我提了个 React 式的建议：“这里能不能抽个高阶组件？”结果组长笑着摇头：“哥，咱们现在推原生组件化，能不用框架就不用，减少 bundle 体积，提升首屏速度。”

我当时脸有点红，默默回到工位，打开 MDN 搜 “Web Components”。

那一晚，我又熬夜了——不是为了赶需求，而是为了补课。

Web Components 到底是什么？一个“老 React 人”的顿悟

说实话，一开始我对 Web Components 是不屑的。心想：“这不就是十年前就有的东西吗？怎么现在又火了？”毕竟在 React 的世界里，一切皆组件，状态管理、虚拟 DOM、Hooks……我们早就习惯了这种“全包式”开发体验。

但当我真正静下心来看文档、写 demo，我才意识到：Web Components 不是在“对抗” React，而是在回归 HTML 的本源。

它由三个核心技术组成：

• Custom Elements（自定义元素）：让你用 class 定义一个新标签，比如 <my-button>。
• Shadow DOM：提供封装的 DOM 和样式，避免全局污染——这不就是 React 的 scoped CSS 吗？但它原生支持！
• HTML Templates：用 <template> 标签预定义结构，按需克隆。

最让我震撼的是，它不需要任何构建工具。你在浏览器控制台直接敲几行代码，就能创建一个可复用的组件：

class MyCounter extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        button { padding: 8px 16px; }
        span { margin: 0 10px; font-weight: bold; }
      </style>
      <button id="dec">-</button>
      <span id="count">0</span>
      <button id="inc">+</button>
    `;
    this.count = 0;
    this.shadowRoot.querySelector('#inc').onclick = () => this.update(++this.count);
    this.shadowRoot.querySelector('#dec').onclick = () => this.update(--this.count);
  }
  update(val) {
    this.shadowRoot.querySelector('#count').textContent = val;
  }
}

customElements.define('my-counter', MyCounter);

然后在 HTML 里直接写：

<my-counter></my-counter>

搞定。没有 npm install，没有 webpack，没有 babel。这就是原生的力量。

我忽然想起刚入行那会儿，还在用 jQuery 拼接字符串生成 DOM，后来 React 出现，大家欢呼“声明式 UI 时代来了”。可如今，Web 平台自己也进化出了声明式、组件化的原生能力。

为什么现在 Web Components 又被重视了？

上周五晚上，我和前同事阿哲视频聊天。他在深圳做区块链钱包前端，聊到他们最近把核心 UI 模块全改成了 Web Components。

“为啥？”我问。

“因为要跨框架啊！”他说，“我们的 DApp 要同时支持 React、Vue、甚至原生 HTML 页面嵌入。如果每个框架都维护一套组件，光同步样式和逻辑就累死。现在用 Web Components 封装成 <crypto-wallet-button>，谁都能用，还能通过属性传参、监听事件，完全解耦。”

我恍然大悟。

Web Components 的最大优势，不是“替代 React”，而是“超越框架”。

在微前端架构盛行的今天，不同团队可能用不同技术栈。主应用是 Vue，子应用是 React，还有一个老系统还是 jQuery —— 这时候，如果有一个通用的导航栏、用户头像、通知弹窗，用 Web Components 实现，就成了“最小公倍数”。

更重要的是，它天然支持懒加载和渐进增强。你可以在 HTML 里先放一个 <loading-spinner>，等 JS 加载完再升级为完整组件。这对首屏性能至关重要——尤其在我们这些二线城市，很多用户用的还是千元机、4G 网络。

我的“代码人生”：从追逐框架到回归本质

说来惭愧，回成都后我一度陷入“技术自卑”。看到别人谈 Svelte、SolidJS、Qwik，我连名字都念不利索。老婆看我愁眉苦脸，有天晚饭时说：“你以前在北京那么拼，不就是为了过点踏实日子吗？技术再新，不也是为人服务的？”

这句话点醒了我。

我开始反思：过去几年，我是不是太执着于“React 最佳实践”、“Hooks 性能优化”这些术层面的东西，反而忘了编程的初心——解决问题，创造价值。

Web Components 让我重新看到了“简单”的力量。它没有 React 那么多概念（Context、Reducer、Suspense……），但它足够直接、足够开放。你可以把它和 React 混用——比如在 React 组件里嵌入一个原生的 <payment-form>，通过 ref 监听它的 submit 事件。

事实上，现在很多大厂已经在这么做了。GitHub 的 <details-menu>、YouTube 的播放器控件、甚至 Salesforce 的 Lightning Web Components，底层都是基于 Web Components 标准。

真正的“代码人生”，不是永远站在技术浪潮尖上，而是在合适的场景选择合适的工具。

区块链？别笑，它和 Web Components 真有关系

你可能会问：文章开头提到“区块链”，这跟 Web Components 有啥关系？

还真有。

上个月，我接了个外包项目，帮一个 NFT 交易平台做前端。对方要求：组件必须能在任意网站嵌入，比如社区论坛、个人博客，用户点击就能连接钱包、查看资产。而且不能依赖 React/Vue，因为目标站点技术栈未知。

我第一反应是搞个 iframe，但安全性差、样式难控、通信麻烦。后来灵机一动：为什么不直接用 Web Components？

于是我写了几个核心组件：

• <web3-connect>：一键连接 MetaMask 或 WalletConnect
• <nft-gallery>：展示用户持有的 NFT
• <token-balance>：显示 ETH 或 ERC-20 余额

每个组件内部用 ethers.js 处理区块链交互，对外只暴露属性和事件。比如：

<web3-connect on-connected="handleConnect"></web3-connect>

宿主页面只需要引入一个 JS 文件，就能用。轻量、安全、跨平台——这不正是去中心化应用（DApp）最需要的特性吗？

做完这个项目，我收了8000块外包费，老婆开心地说：“比你加班还划算！”我笑了笑，心里却明白：技术的价值，从来不在它有多酷，而在它能不能落地。

给同样在“夹缝中求生”的程序员几点建议

如果你也和我一样：

• 被房贷压得喘不过气
• 在二线/三线城市拿不到一线薪资
• 担心技术落后被淘汰

我想说：别慌。

Web Components 不会取代 React，就像 React 也没淘汰 jQuery。它们各有战场。关键是你能否看清场景，灵活切换。

我的几点心得：

1. 不要盲目追新，但也不要拒绝学习。花一周时间搞懂 Web Components 基础，未来遇到跨框架需求时，你就多了一把利器。
2. 原生能力优先。能用 HTML/CSS/JS 原生解决的，别急着上框架。Bundle 小了，性能好了，用户笑了，老板也省了服务器钱。
3. 把技术当工具，别当信仰。React 很棒，但不是唯一真理。有时候，一个 <dialog> 元素比写半天 Modal 组件更高效。
4. 关注“可移植性”。未来的前端，很可能不再是单一 SPA，而是“组件即服务”（Components as a Service）。你的组件越独立，价值越高。

写在最后：慢下来，才能看得更远

今天早上，我又骑车去公司。路过小区门口的包子铺，老板喊我：“小张，老样子？肉包加豆浆！”我笑着点头。阳光透过梧桐树叶洒在地上，斑驳晃眼。

我想起在北京时，每天早上在便利店买15块的三明治，边走边啃，脑子里还在想昨天那个内存泄漏的 bug。那时候，我以为拼命奔跑才能不被淘汰。

现在我才懂：人生不是百米冲刺，而是一场带着行李的徒步。房贷还在，工资不高，但至少，我能在一个安静的夜晚，安心读一篇 MDN 文档，而不是被钉钉消息轰炸。

Web Components 对我而言，不仅是一项技术，更是一种提醒：回到原点，重新思考“什么是好的前端开发”。

或许，真正的“新趋势”，从来都不是某个框架的崛起，而是我们这些普通开发者，在生活的夹缝中，依然保持对技术的好奇与敬畏。

共勉。

—— 一个背着房贷、住在成都、偶尔怀念北京地铁但更爱楼下包子铺的北漂（已回流）程序员
2024年6月