Remix 全栈开发思维入门

背景

Remix 是 React Router 团队打造的全栈 Web 框架，后被 Shopify 收购。它的核心理念是"拥抱 Web 标准"——用原生 FormData、Request/Response 替代复杂的状态管理。如果你已学 React 但觉得全栈开发割裂（前后端分离需要两套心智模型），Remix 会让你眼前一亮。

---

核心概念

Loader + Action 模式

这是 Remix 最核心的设计：

用户请求 /students
        ↓
    loader() 在服务端获取数据
        ↓
    渲染组件（数据通过 useLoaderData 获取）
        ↓
    用户提交表单
        ↓
    action() 在服务端处理数据
        ↓
    Remix 自动重新执行所有 loader() 获取最新数据
        ↓
    组件自动更新

对比传统模式

// 传统 React SPA
const [data, setData] = useState([]);
useEffect(() => { fetch('/api/students').then(r => r.json()).then(setData); }, []);
const handleSubmit = async (e) => {
  e.preventDefault();
  await fetch('/api/students', { method: 'POST', body: JSON.stringify(form) });
  // 手动重新获取数据...
};

// Remix
export async function loader() { return json(await db.students.findMany()); }
export async function action({ request }) {
  const formData = await request.formData();
  await db.students.create({ data: Object.fromEntries(formData) });
  return null;  // Remix 自动重新验证 loader
}
export default function Page() {
  const data = useLoaderData<typeof loader>();  // 数据直接用，不用 useEffect！
  return <Form method="post">...</Form>;       // 提交不用 e.preventDefault()！
}

---

分步操作

第一步：创建项目

npx create-remix@latest my-app
cd my-app
npm run dev

第二步：理解文件系统路由

app/routes/
├── _index.tsx        → /
├── about.tsx          → /about
├── students.tsx       → /students
├── students.$id.tsx   → /students/123
└── admin._index.tsx   → /admin

第三步：编写 loader

// app/routes/students.tsx
import { json } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';

export async function loader() {
  const students = [
    { id: 1, name: '张三', grade: 89 },
    { id: 2, name: '李四', grade: 92 },
  ];
  return json({ students });
}

export default function Students() {
  const { students } = useLoaderData<typeof loader>();
  return (
    <ul>
      {students.map(s => <li key={s.id}>{s.name} - {s.grade}分</li>)}
    </ul>
  );
}

第四步：编写 action

import { Form, useActionData } from '@remix-run/react';

export async function action({ request }) {
  const fd = await request.formData();
  const name = fd.get('name');
  if (!name) return json({ error: '姓名必填' }, { status: 400 });
  // 存入数据库...
  return json({ ok: true });
}

export default function AddStudent() {
  const actionData = useActionData<typeof action>();
  return (
    <Form method="post">
      {actionData?.error && <p style={{color:'red'}}>{actionData.error}</p>}
      <input name="name" placeholder="姓名" />
      <button type="submit">添加</button>
    </Form>
  );
}

---

毕设推荐场景

管理系统

Remix 的表单处理天然适合 CRUD 管理后台——不用写一行 useEffect 和 useState。

毕设全栈

一个项目搞定前后端，不用单独写 REST API，loader/action 就是接口。

部署到 Edge

Remix 支持 Cloudflare Workers / Vercel Edge，全球秒开。

---

思考题

1. Remix 的 action 提交后为什么不需要手动刷新数据？
2. Form 组件和原生 <form> 有什么区别？
3. 如果不用 Remix，用 React + Express 实现同样的 loader/action 模式需要多少额外代码？

---

小结

Remix 重新定义了 React 全栈开发——用 Web 标准替代状态管理，用 loader/action 替代 REST API。如果你追求开发效率和代码优雅度，Remix 会让你的毕设代码比同学少写 50%。