厌倦了追逐 JavaScript 框架？这就是我停止的原因。

前端AI探索
91 阅读4分钟

只要在前端领域待过一周，熟悉的轮回大概率都经历过：某个“全新”框架高喊更快、更简洁、零样板；开发者一拥而上，博客与推文铺天盖地；热度回落后，下一位“救世主”登场。

经历一圈之后，结论逐渐清晰：频繁切换框架并不会让交付更快或代码更好，反而拖慢了节奏。与其到处“追新”，不如回到不变的底层能力。

下文将拆解“为何盲追常常适得其反”，以及打磨基础如何更有效、更长久。

框架的“热度循环”（想必不陌生）

  1. 新框架发布：口号是“更快、更轻、更干净”。
  2. 全网沸腾：时间线刷屏、教程暴增、FOMO 情绪上头。
  3. 真实落地滞后：大多数团队不可能一夜迁移。
  4. 光环褪去：Bug 暴露、复杂度回流、边角料变多。
  5. 重复循环：另一个工具承诺“更美好的未来”。

Vue 曾被寄望“取代 React”；Svelte 一度被视为“终结者”；如今 Solid 与 Qwik 又成了焦点。与此同时，React / Angular 仍是业界主力，而 jQuery 依旧静悄悄地支撑着相当比例的网站。

关键问题不妨直面：每次切换，到底获得了什么？

前端×AI 实战笔记：CSS 动效 / React Hooks / Vue / LLM / Python。案例为主，持续更新；

频繁“换栈”＝用不同语法重造同一轮子

几乎每次拥抱新框架，都会把相同功能用另一套语法重写一遍。例如一个最简单的计数器：

React

import { useState } from 'react';

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

Vue（Options API）

<div id="app">
  <button @click="count++">Clicked {{ count }} times</button>
</div>
<script>
  new Vue({
    el: '#app',
    data: { count: 0 }
  });
</script>

Svelte

<script>
  let count = 0;
</script>

<button on:click={() => count += 1}>
  Clicked {count} times
</button>

行为一致：点击按钮，计数 +1。代价相同：学习新语法、配置新工具、踩新坑。产出一致：得到同一个结果。 —— 这大段时间并非用于交付，而是用于再学习。

没有完美框架，只有不同权衡

  • React：生态庞大；渲染模式多样但样板与心智负担不小。
  • Vue：上手友好；但对自身约定依赖更深。
  • Svelte：书写优雅、响应自然；需要构建链，长期成熟度仍在积累。
  • Solid JS：性能亮眼；社区与工具链相对有限。
  • Angular：一体化强框架；对小项目偏重，上手曲线更陡。

从 A 切到 B，往往不是“升级”，而是用新的问题替换旧的问题。

基础从不过时

要写出更好的代码、交付更成熟的产品、提升工程上限，抓住那些不变的东西更关键：

  • JavaScript / TypeScript 核心能力
  • DOM 与浏览器运行时机制
  • HTML / CSS 与可访问性
  • 架构抽象与模块化
  • 调试、测试与性能优化

底层功力越扎实，任何框架的上手都更快、边际收益更高——并且对框架的依赖更低。

一个“趣闻”：jQuery 按现代标准或许“过时”，但仍活跃在数以百万计的网站上；因为平台基本面可靠。

Web Components：并不一定需要框架

想要可复用的 UI 组件，不一定非得依赖框架。来看原生平台的一个等价示例（计数器）：

class MyCounter extends HTMLElement {
  constructor() {
    super();
    this.count = 0;
    this.attachShadow({ mode: 'open' });

    this.button = document.createElement('button');
    this._updateButton();

    this.button.addEventListener('click', () => {
      this.count++;
      this._updateButton();
    });

    this.shadowRoot.appendChild(this.button);
  }

  _updateButton() {
    this.button.textContent = `Clicked ${this.count} times`;
  }
}

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

HTML 中直接使用：

<my-counter></my-counter>

无需框架、无需构建，直接依托浏览器原生特性即可运行。

更稳健的学习与选型方式

  • 先磨基本功，而非逢新必追；
  • 按问题选工具，不按热度选图标；
  • 做真实项目，而非五种版本的 Todo；
  • 保持好奇心，但把“大赌注”留给经验证的栈；
  • 新框架可作为试验田（Side Project / 夜间实验），团队主线用稳定成熟的方案。

这不是“抱旧”，而是把当下的生产力放在第一位；同时，团队协作、知识传递与可维护性，将因此受益。

最后：别自我焦虑——并没有“落后”

没有用上“NewFramework.js”，并不意味着“跟不上时代”。 坚持有效的工具并非顽固；避免无意义重写也不是偷懒——而是专注。

框架此起彼伏、你方唱罢我登场；而 JavaScript / DOM / CSS / 清晰架构 这些根基，一直在、也一直会被需要。 继续学习、持续实践、谨防热度绑架节奏——这才是持续前进的方式。

avatar
文章
阅读
粉丝