本以為能簡化一切的框架,卻讓我的程式碼庫變成惡夢
內容提要:在使用 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 不僅程式碼更簡潔,而且更易讀。
虛擬 DOM 的謊言
都說虛擬DOM能讓React更快,其實不然。它反而增加了開銷。Svelte 直接編譯為操作原生 DOM 的 JavaScript,運行時性能提升 3 倍。
生態圈的陷阱
React 生態龐大但碎片化。狀態管理?Redux、Zustand、Context 等幾十種選擇。樣式方案?CSS-in-JS、CSS Modules、Styled Components... 選擇太多反而無從下手。
無止境的學習曲線
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 的動畫庫。
「但是生態兼容怎麼辦?」
問得好。這是我的發現:
切換至 Svelte 後:
✅ 部署速度提升 3 倍
✅ 打包體積減少 95%
✅ 開發時間減少 40%
✅ Bug 反饋減少 60%
✅ 團隊滿意度大幅提升
React 正在成為 2024 年的 jQuery:對於大多數應用場景過於複雜,依靠慣性和大廠支持維持生命。
而 Svelte 只是簡潔地工作。
不需要絞盡腦汁,不需要深陷性能優化的漩渦,沒有依賴地獄。
寫出來的程式碼,就是你想要的樣子。
我不是說 React 一無是處。對於擁有大型 React 程式碼庫的團隊,轉換可能並不現實。
但對於新專案?每次我都選 Svelte。
開發界正在慢慢覺醒:
不必聽信我的一面之詞。用週末時間嘗試用 Svelte 構建些東西:
npm create svelte@latest my-app
cd my-app
npm install
npm run dev
我保證你也會經歷和我一樣的「震撼時刻」。
你怎麼看?繼續堅守 React 還是嘗試新選擇?歡迎在評論區分享你的觀點 👇