站長阿川

站長阿川私房教材:
學 JavaScript 前端,帶作品集去面試!

站長精心設計,帶你實作 63 個小專案,得到作品集!

立即開始免費試讀!

本以為能簡化一切的框架,卻讓我的程式碼庫變成惡夢
內容提要:在使用 React 開發四年、構建了 20 多個生產應用之後,我決定轉向 Svelte,並且再也沒有回頭。

嚴重崩潰的瞬間

上個月,我花了六個小時調試一個「簡單」的表單元件——問題出在 useState 無法立即更新。這是 React 的老毛病,就連資深開發者都容易踩坑。

那一刻我突然意識到:我花在對抗 React 上的時間,比實際開發功能還要多。

數據不會說謊

來看一組我從 React 切換到 Svelte 後的專案對比:

打包體積:
React + Redux:847kb
Svelte:23kb

建構時間:
React:45 秒
Svelte:3 秒

程式碼行數:
React:2847 行
Svelte:892 行(實現相同功能)
打包體積減少了 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}
  加載中...
{:then data}
  {count = data.count}
{:catch error}
  {error.message}
{/await}

Svelte 不僅程式碼更簡潔,而且更易讀。

React 的問題出在哪?

  1. 虛擬 DOM 的謊言
    都說虛擬DOM能讓React更快,其實不然。它反而增加了開銷。Svelte 直接編譯為操作原生 DOM 的 JavaScript,運行時性能提升 3 倍。

  2. 生態圈的陷阱
    React 生態龐大但碎片化。狀態管理?Redux、Zustand、Context 等幾十種選擇。樣式方案?CSS-in-JS、CSS Modules、Styled Components... 選擇太多反而無從下手。

  3. 無止境的學習曲線
    Hooks、Context、Suspense、Concurrent Mode、Server Components... React 不斷疊加新概念。用了四年 React,我每週還在遇到新問題。

真希望早知道的事

默認高性能

// React:處處需要手動優化
const MemoizedComponent = React.memo(({ data }) => {
  const expensiveValue = useMemo(() => processData(data), [data]);

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

// Svelte:默認高效
<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>零配置的順滑動畫</p>
  </div>
{/if}

在 React 中實現同樣的效果,可能需要引入 200kb 的動畫庫。

轉換現實考量

「但是生態兼容怎麼辦?」

問得好。這是我的發現:

  • 元件庫:SvelteKit UI、Carbon Components Svelte
  • 狀態管理:內置 Store(輕量且強大)
  • 路由:SvelteKit(比 Next.js 更優秀)
  • 測試:Vitest 完美兼容
  • TypeScript:一等公民支持

實際效果

切換至 Svelte 後:
✅ 部署速度提升 3 倍
✅ 打包體積減少 95%
✅ 開發時間減少 40%
✅ Bug 反饋減少 60%
✅ 團隊滿意度大幅提升

一個令人不安的真相

React 正在成為 2024 年的 jQuery:對於大多數應用場景過於複雜,依靠慣性和大廠支持維持生命。

而 Svelte 只是簡潔地工作。

不需要絞盡腦汁,不需要深陷性能優化的漩渦,沒有依賴地獄。

寫出來的程式碼,就是你想要的樣子。

接下來怎麼做?

我不是說 React 一無是處。對於擁有大型 React 程式碼庫的團隊,轉換可能並不現實。

但對於新專案?每次我都選 Svelte。

開發界正在慢慢覺醒:

  • GitHub 新儀表板:使用 Svelte 構建
  • Apple 開發者文檔:基於 SvelteKit
  • 紐約時報:正在轉向 Svelte

親自嘗試

不必聽信我的一面之詞。用週末時間嘗試用 Svelte 構建些東西:

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

我保證你也會經歷和我一樣的「震撼時刻」。

你怎麼看?繼續堅守 React 還是嘗試新選擇?歡迎在評論區分享你的觀點 👇


原文出處:https://juejin.cn/post/7544237599172542473

按讚的人:

共有 0 則留言


精選技術文章翻譯,幫助開發者持續吸收新知。
站長阿川

站長阿川私房教材:
學 JavaScript 前端,帶作品集去面試!

站長精心設計,帶你實作 63 個小專案,得到作品集!

立即開始免費試讀!