我为什么停止使用 React（你也应该停止使用）🔥

这个号称能简化一切的框架，结果却让我的代码库变成了一场噩梦。

TL;DR：在用 React 开发了 4 年，构建了 20 多个生产应用之后，我决定不再用 React 了。以下是我转而使用 Svelte 并且再也没有回头的原因。

崩溃点

上个月，我花了六个小时调试一个“简单”的表单组件。问题出在哪里？useState 没有立即更新。这是 React 的一个经典陷阱，即使是资深开发者也常常被它难住。

那时我才意识到：我花在与 React 作斗争上的时间比实际构建功能的时间还要多。

数字不会说谎

让我来展示一下我的最新项目从 React 切换到 Svelte 后的变化：

Bundle Size:
React + Redux: 847kb
Svelte: 23kb

Build Time:
React: 45 seconds
Svelte: 3 seconds

Lines of Code:
React: 2,847 lines
Svelte: 892 lines (same functionality)

这意味着文件包体积缩小了 97%，构建速度提高了 15 倍。

开发者体验革命

之前（React）：

const [count, setCount] = useState(0);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);

useEffect(() => {
  setLoading(true);
  fetchData()
    .then(data => {
      setCount(data.count);
      setLoading(false);
    })
    .catch(err => {
      setError(err.message);
      setLoading(false);
    });
}, []);

之后（Svelte）：

<script>
  let count = 0;
  let promise = fetchData();
</script>

{#await promise}
  Loading...
{:then data}
  {count = data.count}
{:catch error}
  {error.message}
{/await}

Svelte 版本不仅篇幅更短，而且更易读。

React 做错了什么

1. 虚拟 DOM 的谎言

我们曾被告知虚拟 DOM 能让 React 运行得更快。事实并非如此。它反而会增加开销。Svelte 编译成原生 JavaScript，直接操作 DOM。结果呢？运行时性能提升了 3 倍。

2. 生态系统陷阱

React 的生态系统庞大但分散。需要状态管理？你可以选择 Redux、Zustand、Context 或其他 47 种方案。需要样式？CSS-in-JS、CSS Modules、styled-components……

分析瘫痪是真实存在的。

3. 学习曲线永无止境

Hooks、Context、Suspense、并发模式、服务器组件……React 的复杂性与日俱增。我使用 React 已经四年了，但每周仍然会遇到新的陷阱。

我希望我早点知道的事

默认性能

// React: Manual optimization needed everywhere
const MemoizedComponent = React.memo(({ data }) => {
  const expensiveValue = useMemo(() => 
    processData(data), [data]
  );

  return <div>{expensiveValue}</div>;
});

// Svelte: Fast by default
<script>
  export let data;
  $: expensiveValue = processData(data);
</script>

<div>{expensiveValue}</div>

内置动画

<script>
  import { fade, slide } from 'svelte/transition';
  let visible = true;
</script>

{#if visible}
  <div transition:fade>
    <p transition:slide>Smooth animations, zero configuration</p>
  </div>
{/if}

试试在不使用 200kb 动画库的情况下，用 React 实现这个功能。

移民的现实

“但是生态系统呢？”

这个问题值得关注。以下是我的发现：

• 组件库： SvelteKit UI、Carbon Components Svelte
• 状态管理：内置存储（小巧而强大）
• 路由： SvelteKit（比 Next.js 更好）
• 测试： Vitest 运行完美
• TypeScript：一流的支持

实际结果

自从改用 Svelte 之后：

✅部署速度：提升 3 倍
✅软件包大小：缩小 95%

✅开发时间：缩短 40%
✅错误报告：减少 60%
✅团队满意度：极高

令人不安的真相

React 成了 2024 年的 jQuery。对于大多数使用场景来说过于复杂，靠着发展势头和大公司的支持才得以存活。

与此同时，Svelte 运行起来却很流畅。

无需费脑筋。无需陷入性能优化的泥潭。无需忍受依赖地狱。

只要写出能实现其外观所显示功能的代码就行了。

接下来是什么？

我并不是说 React 一无是处。对于拥有现有 React 代码库的大型团队来说，迁移可能并不划算。

但对于新项目呢？每次都选择Svelte。

Web开发界正在慢慢觉醒：

• GitHub 的新仪表盘：基于 Svelte 构建
• 苹果开发者文档：SvelteKit
• 《纽约时报》：迁移到苗条

自己动手试试

别光听我说，花一个周末用 Svelte 做点东西试试。

npm create svelte@latest my-app
cd my-app
npm install
npm run dev

我保证你也会有我当时那种“卧槽”的惊呼时刻。

你的看法是什么？你仍然支持 React，还是准备尝试一些新的东西？

请在下方留言👇