---
title: "用 Vite 搭 React 19 任务管理器：Actions 与乐观更新入门 - Angryecho"
description: "想快速摸到 React 19 的 Actions、useActionState、useOptimistic，不必一上来就上 Next.js。"
canonical_url: "https://www.angryecho.com/c/React/p/P2TBBo2O0HnMUUz0o6xLr"
meta:
"og:description": "想快速摸到 React 19 的 Actions、useActionState、useOptimistic，不必一上来就上 Next.js。"
"og:image": "https://www.angryecho.com/_og/d/c_Post%2Ctitle_~5ZCQ5qe9572R%2Cdescription_~5ZCQ5qe95LiA5LiL77yM5bCx5LiK5ZCQ5qe9572R44CC%2CpostId_P2TBBo2O0HnMUUz0o6xLr%2Crevision_~MjAyNi0xMC0yOFQwMjo1NjowMC4yNzc5NDRa%2Cp_Ii9jL1JlYWN0L3AvUDJUQkJvMk8wSG5NVVV6MG82eExyIg%2Cs_7SBJlWZNChjQWqqN.png"
"og:image:height": "630"
"og:image:type": image/png
"og:image:width": "1200"
"og:title": "用 Vite 搭 React 19 任务管理器：Actions 与乐观更新入门"
---
> Index of every page on this site: [llms.txt](https://www.angryecho.com/llms.txt)
# **用 Vite 搭 React 19 任务管理器：Actions 与乐观更新入门**
想快速摸到 React 19 的 Actions、`useActionState`、`useOptimistic`，不必一上来就上 Next.js。技术栈博文以 React 19.2 + TypeScript + Vite 为基线，带出一个可独立运行的 TaskFlow 任务管理示例：创建、筛选、标记完成、删除，数据暂存 `localStorage`，之后可把数据层换成 REST。\[1]
## 准备工作
- Node.js：Vite 文档要求约 `20.19+` 或 `22.12+`，建议用仍在维护的 LTS（原文举例 Node.js 24 LTS）。
- 包管理器：npm / pnpm / Yarn / Bun 任选。
- 编辑器与可选扩展：VS Code 等；浏览器装 React Developer Tools。
先确认环境：
```bash
node -v
npm -v
```
## 操作步骤
### 1、用 Vite 创建 React + TS 项目
```bash
npm create vite@latest taskflow -- --template react-ts
cd taskflow
npm install
npm install react@latest react-dom@latest
npm install -D @types/react@latest @types/react-dom@latest
npm run dev
```
浏览器打开 `http://localhost:5173`，能看到默认页面即成功。可用 `npm ls react react-dom` 确认已到 19.x。为何这样：官方已弃用 Create React App；Vite 模板适合纯客户端练手，显式安装最新 React 才能稳定用到 Actions 相关 API。\[1]
### 2、拆领域模型与数据层
在 `src/domain/task.ts` 定义任务类型（`id`、`title`、`completed`、`createdAt`）。在 `src/services/taskApi.ts` 用 `localStorage` 封装 `list` / `create` / `toggle` / `remove`：读写前把 `JSON.parse` 结果当 `unknown` 做运行时校验，写一点延迟模拟异步。不要在组件里直接碰存储。
为什么：组件只关心「任务列表变了」；以后换 HTTP 只改 `taskApi`。确认方式：在控制台调用 `taskApi.create` 后刷新，数据仍在。\[1]
### 3、用表单 Action 做「创建任务」
`TaskComposer` 里用 `useActionState` 接管提交：
```tsx
const [state, submitAction] = useActionState(async (_prev, formData) => {
const title = String(formData.get('title') ?? '').trim();
if (title.length < 2) return { status: 'error', message: '至少两个字符' };
const task = await taskApi.create(title);
onCreated(task);
return { status: 'success', message: '创建成功' };
}, { status: 'idle', message: '' });
```
表单写 `