如果你是一名网页开发者，超过五分钟你就会发现这种模式：每隔几个月，就会出现一个 时髦的新JavaScript框架 ，承诺解决你所有的问题。更好的性能，更简洁的语法，更多的魔法。但是经过几年从 AngularJS 到 React 再到 Vue 再到 Svelte （现在可能是 Solid 或 Qwik 等）的不断切换，我有了一个重要的领悟：不断追逐最新的JavaScript框架往往是在浪费大量宝贵时间。

不要误会——创新确实很棒，每种工具都有它的优势。但最终，你需要问自己：我在构建有意义的东西，还是仅仅在用略微不同的方式重新学习构建同样的应用而已？

这篇文章探讨了为什么“框架炒作周期现象”可能让你止步不前，以及为什么投资于基础和稳定的技术可能是一条更有益的路径。你会发现你已经有了创造惊人事物的所有工具，无需不停地重新发明轮子。

让我们面对现实吧——作为JavaScript开发者，我们特别喜欢新奇的事物。通常这个过程是这样的：

1. 下一个大事件来了： 有人推出了一款“革命性”的框架，比之前的任何框架都更快、更小、更简洁，这让各地开发者都感到好奇。

2. 大家都在跟这股热潮： 技术界的Twitter、博客文章、YouTube教程等——这个新框架随处可见。早期采用者认为它将是web开发的未来。

3. 现实逐渐浮现: 拥有实际产品的公司在推进时会特别小心。他们需要的是可靠的程序，因此新技术的采用会逐渐进行。

4. 热潮消退：最终，这个“革命性”的框架逐渐成熟，变得复杂，开始与它想要替代的旧框架相似。最初的兴奋渐渐消失。

5. 使用一个新的名字重复： 很快又有一个新的热门框架出现了，循环再次启动，只是稍微有点不一样。

记得当初 Vue.js 要取代 React 的时候吗？随后 Svelte 又声称要让它们都过时。现在又轮到了 Solid 或 Qwik。与此同时，React 和 Angular 依旧在业界占据主导地位，而 jQuery（没错，这个 2006 年的老库）仍然默默支持着无数网站。虽然工具在不断进化，但炒作周期依然存在。

在某个阶段，我停下来问自己：_每年更换框架，我实际上得到了什么好处？_在很多情况下，答案是“不多”。

我也喜欢尝试新技术，和任何人一样。更好的开发体验和提高效率的前景真的很有吸引力。但是每次我切换到一个新的框架，我的效率都会下降。想象一下当你用上 Latest-and-Greatest.js 会怎样：

• 你又学到了一个新的组件语法和项目结构
• 你又搞明白了另一种状态管理方式
• 你查阅文档并解决该框架特有的各种小问题
• 你甚至可能迁移或重写现有组件以符合新范式
• 你得花时间说服你的团队（或者你自己），这次切换值得。

而且，经过一番努力之后，你通常发现你最终往往会构建出相同的特性功能，这些其实你早就有了。一个切换按钮、一个表单、一个项目列表——这些功能实际上并没有变化，实现的细节仅有所不同。

这里有一个简单的计数器组件，当点击时会增加一个计数，这在三个不同的框架中实现。

    // 使用 React 的 JSX
    import { useState } from 'react';

    function Counter() {
      const [count, setCount] = useState(0);
      return (
        <button onClick={() => setCount(count + 1)}>
          点击了 {count} 下
        </button>
      );
    }

全屏 退出全屏

    <!-- 使用 Vue.js（带选项式 API） -->
    <div id="app">
      <button @click="count++">点击了 {{ count }} 次了</button>
    </div>
    <script>
      new Vue({
        el: '#app',
        data: { count: 0 }
      });
    </script>

点击全屏模式，点击退出全屏

    <!-- 在使用 Svelte -->
    <script>
      let count = 0;
    </script>

    <button on:click={() => count += 1}>
      已点击 {count} 次
    </button>

全屏模式入口 退出全屏

每个框架都有自己的语法和特点，但它们其实都在做同样的事：在按钮点击时更新计数器。每次换用新的框架就意味着重新学习这些小细节并重新编写之前构建的组件。实验有趣，但在尝试交付实际项目时，这种不断的调整会消耗你的动力。

我终于意识到，我花在学习框架上的时间比实际构建实际有用的特性还要多。我的产品想法列表并没有因为从框架X换成框架Y而变短。最初重构所有东西确实挺激动人心的，但这对你的最终产品或用户来说并没有实际帮助。

技术讨论常常演变成关于哪个框架最优秀的争论。事实是：并没有哪个框架是绝对最好的。每个选择都有各自的取舍：

• React: 巨大的生态系统和社区，但你会遇到繁琐的样板代码和复杂的渲染逻辑（比如 useEffect 依赖或协调过程中的小麻烦）。

• Vue: 对于初学者来说，Vue 直观易用，但是也有一套自己的规矩（单一的文件组件、Vue 自己的状态库），你得跟着这些规矩来。

• Svelte: 消除冗余代码，内置响应性，但需要经过编译步骤，并且生态系统较小。你不能直接将 Svelte 组件加入现有应用中而无需先经过构建步骤。

• SolidJS: 采用类似于 React 的语法，性能优异，由于是较新的框架，遇到问题时可获得的资源也相对较少。

• Angular: 一个功能全面且自带所有组件的框架，结构清晰——不过学习曲线较陡，在较小项目中可能显得过于庞大。

实际上，每个框架都有其优势和劣势。当你从一个框架跳到另一个框架的时候，你是在用一组问题换来另一组问题。这个新的闪亮框架可能解决了某些问题，但它也会带来一系列新的挑战。

理解了这一点后，我就不再寻找所谓的“完美框架”，而是把重心放在构建优质软件的真正重要基础。

来个现实的检查：公司和严肃的项目优先考虑稳定性和可维护性，而不是那些时髦的技术。看看招聘信息或与招聘经理聊聊，反复提到的技术都是那些已经成熟的。React 出现在所有提到前端框架的职位列表中超过 57% 的情况下，Angular 则紧随其后，占比大约 32%。Vue 也占有相当大的份额。而较新的选择呢？它们在就业市场上仍然属于小众。

一家创新的初创公司可能会尝试使用 Svelte 或 Solid，或者昨天在 Hacker News 上流行的任何技术。但大多数成熟公司的生产应用不会仅仅因为某种技术当月流行就完全重写。频繁更换技术栈不仅风险高，而且成本大。企业需要那些已经被证明可靠并易于维护的代码。因此，他们会选择一个稳定的、熟悉的代码栈，而不是选择一个可能充满未知陷阱的新框架。

这对开发者意味着什么？这意味着掌握核心技能和常用工具将比了解每个新框架更有利于你的职业发展。JavaScript（以及TypeScript）的基础知识、对DOM、HTML、CSS的扎实理解，以及如何设计干净且模块化的代码——这些技能一直受到欢迎。它们超越了流行的框架。

趣味事实： 虽然jQuery在流行程度上可能已经不再那么火热了，但它仍然在比大多数现代框架更多的网站上运行。jQuery简化过的底层DOM API依旧可以直接使用。一个熟悉DOM和原生JavaScript的开发者通常可以通过增加少量代码实现相同的功能——根本不需要任何复杂的框架。

我曾经以为换新框架能提升我的技能。我以为只要简历上写上“React/Vue/Svelte/Solid专家”，我就会显得很有技能和多样性。实际上，换框架只是让我了解了工具之间的不同，却没教会我怎么写出更好的代码或构建更好的产品。

实际上，成为一个出色的开发者不在于你懂哪个框架——而是要看你是否知道如何解决实际问题：

• 将复杂特性拆分为更简单的组件或模块
• 编写干净、易读且架构良好的代码，无论使用何种工具
• 知道如何调试问题、编写测试以及处理边界条件
• 理解性能瓶颈（为什么某些算法性能低下，底层渲染机制是如何工作的）
• 能够根据需要快速掌握任何框架，因为你理解其背后的原理

如果你在框架之间跳来跳去，但把它们看作黑盒，你可能会错过前端开发的一些深层知识。相反，如果你强化核心 JavaScript 技能，学习设计模式，或探索 browser Web APIs，你会发现用任何框架都更容易，甚至不用框架。你可能会发现仅仅依靠平台本身就能完成很多事情。

例如：Web 组件比框架更优秀

常常被忽略的一组基础知识是 Web Components 标准。它允许你直接在浏览器内创建可重复使用的自定义元素，而无需任何框架。这里有一个简单的 Web 组件示例，功能类似于我们的计数器，仅使用纯 JS 和浏览器 API：

    // 定义一个自定义的 web 组件（不使用任何框架）
    class MyCounter extends HTMLElement {
      constructor() {
        super();
        this.count = 0;
        // 附加一个 shadow DOM 以实现封装
        this.attachShadow({ mode: 'open' });
        // 在 shadow DOM 中创建一个按钮元素
        this.button = document.createElement('button');
        this._updateButton(); // 更新按钮文本到初始状态
        this.button.addEventListener('click', () => {
          this.count++;
          this._updateButton();
        });
        this.shadowRoot.appendChild(this.button);
      }

      _updateButton() {
        this.button.textContent = `已点击 ${this.count} 次`;
      }
    }
    customElements.define('my-counter', MyCounter);

全屏 全屏退出

你可以在你的 HTML 中使用 <my-counter></my-counter>，它会和我们之前提到的例子一样运作。这并不是说你不应该使用框架——但它表明平台本身也有其强大的功能，非常值得你去了解。通过深入理解核心 web 技术，你会逐渐减少对任何单一框架抽象的依赖。

从这样的探索中获得的技能（理解事件、高效操作DOM、组件封装等）在任何地方都有用。它们会帮助你在使用React、Vue或你选择的任何框架时更加得心应手，因为你能够明白背后的原理。

这些天我在做什么而不是追框架风潮

我并没有完全拒绝新的框架（它们仍然很有趣，可以探索一下！）。但我已经改变了我的方式：

• 加倍关注基础: 我会花更多的时间来提升我的核心 JavaScript/TypeScript、HTML 和 CSS 技巧。没想到，很多所谓的“神奇”框架特性其实只是巧妙地运用了语言的基本原理。了解闭包和模块模式能够让你不依赖任何库就能实现简单状态管理。

• 将框架视为工具，而不是教条： 我现在选择框架时主要考虑项目需求和团队专长，而不是追求新奇。如果团队擅长 React 并且需要快速开发，我们就继续用 React。如果要在基本上是纯 JS 的项目中添加一个小功能，我可能根本不会用框架。

• 构建真实的项目（即使是小项目也可以）： 没有什么比从头到尾完成一个项目更能学到东西了。与其在五个框架里重复写同一个例子，我更专注于使用已熟悉的工具构建有用的项目。通过自己的应用Kollabe，我学到的东西更多，比通过框架迁移学到了更多关于软件开发和团队合作方面的事。通过构建真实的产品，我学会了如何管理不断增加的复杂性、应对用户反馈和优化性能——这些经验比任何其他经历都更让我印象深刻。

• 既要关注趋势，但为重要的工作还是选择经过验证的技术： 我会留意新的库和开发动态（毕竟我是一名开发者）。我也会在小项目中尝试它们或研究其概念。但我对生产代码或有截止日期的任务，则依赖于稳定且文档齐全的技术。这并不是保守，而是更务实。只要新的工具证明其价值并满足特定需求，我就能随时采用它们。

这种转变不仅带来了更多的安心，还提高了生产力。我不再担心“FrameworkXYZ 1.0 刚刚发布，我落伍了。”相反，我冷静地评估新技术的出现，经常发现现有的技能已经足够应对。

框架来来去去。今天是 React 和 Svelte 的对决，昨天是 Angular 和 Backbone 的较量，明天又会是其他东西。你所使用的具体工具会随职业生涯变化——这是很正常的。但良好的软件开发原则是恒定的。干净的代码、周到的架构设计、解决问题的能力，以及对所用工具的深刻理解比盲目追逐最新潮流更有用。

当你看到某个新的闪亮框架流行起来时，可以看看（好奇心是值得的！）。但请记住，你不需要围绕它彻底重构你的工作流程。你不至于因为这个月没把你的应用改写成 NewHotness.js 就觉得自己落后了。你实际上可能通过专注于稳定性和对你现有东西的有意义改进，为自己和你的用户带来很大好处。

保持热情，不断学习，但要保持冷静。说到底，打造能够运作并帮助人们的实际成果比追逐炒作更有满足感。使用适合你情况的工具，掌握基础，你就能应对任何技术浪潮来袭——无需经历耗尽精力的状态或倦怠。

继续写代码，不断进步，最重要的是要享受这个过程。

哦，不谦虚地说 🔌 如果你的团队进行回顾，可以试试看我免费的工具Kollabe。