用Svelte 5 Runes构建响应式UI：比React简单10倍的状态管理

用Svelte 5 Runes构建响应式UI：比React简单10倍的状态管理

React状态管理的"复杂度爆炸"

React的状态管理演进：useState → useReducer → Context API → Redux → Zustand → Jotai → Recoil…

每个新方案都声称"更简单"，但学习者需要掌握"又一个范式"。

核心问题： React的"状态"是"组件级"的——要让多个组件共享状态，必须用"prop drilling"或"Context"，前者繁琐，后者性能差（每次状态变化都重新渲染所有消费者）。

Svelte 5 Runes的解决方案：

Runes是"Svelte 5（2024年发布）的响应式系统"——它用"编译器级别的细粒度响应式"，让"状态共享"和"派生状态"变得极其简单。

Svelte 5 Runes核心概念：$state、$derived、$effect

$state()：响应式状态声明

<script>
// 声明响应式状态（类似React的useState，但更强大）
let count = $state(0);

function increment() {
count++; // 直接修改！不需要setCount
}
</script>

<button on:click={increment}>
Clicked {count} times
</button>

关键差异：

• React：const [count, setCount] = useState(0); setCount(count + 1);
• Svelte：let count = $state(0); count++;

Svelte的$state()是"深层响应式"的——如果你有对象或数组，修改嵌套属性也会触发更新。

$derived()：派生状态（类似React的useMemo）

<script>
let count = $state(0);

// 派生状态：自动追踪依赖（count），count变化时自动重新计算
let doubled = $derived(count * 2);

// 更复杂的派生
let description = $derived({
get message() {
return count > 10 ? '太多啦' : '继续点';
}
});
</script>

<p>{count} × 2 = {doubled}</p>
<p>{description.message}</p>

$effect()：副作用（类似React的useEffect）

<script>
let count = $state(0);

// 副作用：count变化时自动执行
$effect(() => {
console.log(`count变成了 ${count}`);
document.title = `Clicked ${count} times`;
});

// 带清理的副作用
$effect(() => {
const timer = setInterval(() => {
console.log('定时器运行中…');
}, 1000);

return () => clearInterval(timer); // 清理函数
});
</script>

状态共享：不需要"Context"或"状态管理库"

问题： 在React里，如果"父组件"和"孙子组件"需要共享状态，必须用Context.Provider包裹，或用Zustand等外部库。

Svelte的解决方案： 把状态声明在"模块级"（.svelte.js文件），任何组件都能导入并使用。

创建共享状态模块：

// lib/stores/counter.js
import { state, derived } from 'svelte/legacy'; // Svelte 5兼容模式

// 方法一：用Svelte 5的$state（推荐）
export let count = $state(0);

export function increment() {
count++;
}

export function reset() {
count = 0;
}

// 派生状态
export let isEven = $derived(count % 2 === 0);

在组件中使用：

<!– components/Counter.svelte –>
<script>
import { count, increment, reset, isEven } from '$lib/stores/counter.js';
</script>

<div>
<p>Count: {count}</p>
<p>偶数？ {isEven ? '是' : '否'}</p>
<button on:click={increment}>+1</button>
<button on:click={reset}>重置</button>
</div>

关键： 当count变化时，所有导入了count的组件都会自动更新——不需要Context.Provider，不需要useSelector。

Props（组件通信）：比React更简洁

传递Props：

<!– Parent.svelte –>
<script>
import Child from './Child.svelte';
let name = $state('World');
</script>

<Child {name} age={25} />

接收Props：

<!– Child.svelte –>
<script>
// 方法一：用let声明（自动成为prop）
let { name, age } = $props();

// 方法二：带默认值
let { name = 'Guest', age = 0 } = $props();
</script>

<p>Hello {name}, age {age}</p>

响应式Props： 如果父组件的name变化，子组件会自动更新。

实战：用Svelte 5 + Runes构建待办事项应用

第一步：初始化Svelte项目

# 创建Svelte 5项目
npm create svelte@latest

# 选择：
# – Template: SvelteKit (full stack)
# – TypeScript: Yes
# – ESLint/Prettier: Yes

cd my-todo-app
npm install

第二步：创建共享状态（待办事项列表）

// lib/stores/todos.js
export let todos = $state([]);
export let nextId = $state(1);

export function addTodo(text) {
todos = […todos, { id: nextId++, text, done: false }];
}

export function toggleTodo(id) {
todos = todos.map(todo =>
todo.id === id ? { …todo, done: !todo.done } : todo
);
}

export function removeTodo(id) {
todos = todos.filter(todo => todo.id !== id);
}

// 派生状态
export let completedCount = $derived(todos.filter(t => t.done).length);
export let totalCount = $derived(todos.length);

第三步：创建TodoList组件

<!– components/TodoList.svelte –>
<script>
import { todos, toggleTodo, removeTodo } from '$lib/stores/todos.js';
</script>

<ul class="space-y-2">
{#each todos as todo (todo.id)}
<li class="flex items-center gap-2 p-2 border rounded">
<input
type="checkbox"
checked={todo.done}
on:change={() => toggleTodo(todo.id)}
class="h-5 w-5"
/>
<span class:line-through={todo.done} class="flex-1">
{todo.text}
</span>
<button
on:click={() => removeTodo(todo.id)}
class="text-red-500 hover:text-red-700"
>
删除
</button>
</li>
{/each}
</ul>

第四步：创建TodoInput组件

<!– components/TodoInput.svelte –>
<script>
import { addTodo } from '$lib/stores/todos.js';

let text = $state('');

function handleSubmit() {
if (!text.trim()) return;
addTodo(text);
text = '';
}
</script>

<form on:submit|preventDefault={handleSubmit} class="flex gap-2">
<input
type="text"
bind:value={text}
placeholder="添加待办事项…"
class="flex-1 p-2 border rounded"
/>
<button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded">
添加
</button>
</form>

第五步：创建Stats组件（展示派生状态）

<!– components/Stats.svelte –>
<script>
import { completedCount, totalCount } from '$lib/stores/todos.js';
</script>

<div class="p-4 bg-gray-100 rounded">
<p>总计：{totalCount} 项</p>
<p>已完成：{completedCount} 项</p>
<p>进度：{totalCount > 0 ? Math.round(completedCount / totalCount * 100) : 0}%</p>
</div>

第六步：组合成完整应用

<!– routes/+page.svelte –>
<script>
import TodoInput from '$lib/components/TodoInput.svelte';
import TodoList from '$lib/components/TodoList.svelte';
import Stats from '$lib/components/Stats.svelte';
</script>

<div class="max-w-2xl mx-auto p-6">
<h1 class="text-3xl font-bold mb-6">待办事项</h1>

<TodoInput />

<div class="my-6">
<Stats />
</div>

<TodoList />
</div>

性能对比：Svelte 5 vs React 18

测试场景： 1000个待办事项的列表，点击复选框切换状态。

与后端集成：SvelteKit的Load函数

SvelteKit（Svelte的全栈框架）提供了load函数——类似Next.js的getServerSideProps，但更简洁。

服务端加载数据：

<!– routes/todos/+page.server.js –>
import { db } from '$lib/db';

export async function load() {
const todos = await db.todos.findMany();
return { todos };
}

在页面中使用：

<!– routes/todos/+page.svelte –>
<script>
export let data; // SvelteKit自动注入（从load函数返回）

// 也可以用$data访问
let { data } = $props();
</script>

<h1>待办事项（从服务端加载）</h1>
<ul>
{#each data.todos as todo}
<li>{todo.text}</li>
{/each}
</ul>

结论：Svelte 5 Runes是"状态管理的终点"？

React的状态管理生态在"内卷"——每个新库都声称"比之前的更简单"。但Svelte 5 Runes从"语言层面"解决了问题：状态就是响应式的，不需要"管理"。

适合场景：✅ 新项目（没有React生态包袱）✅ 需要"高性能"和"小包体积"的应用✅ 团队愿意学新框架（学习曲线平缓）

不适合场景：❌ 需要大量现成组件库（React生态更丰富）❌ 团队不熟悉"编译器-based框架"（Svelte是编译的，调试和错误信息的风格不同）

独立开发者的建议：

如果你在做"新的Web应用"，且"包体积和性能"是优先级，Svelte 5 + SvelteKit是比React + Next.js更好的选择。它的"状态管理"简单到"不需要学"——这让你可以专注"产品功能"，而不是"框架API"。

下一步： 用Svelte 5重写你的一个小型React应用——你会惊讶于"代码量减少50%，且性能更好"。

这是为账号19tanjinxi生成的第2607/0726/6篇技术博客，主题：Svelte 5 Runes状态管理。