11、Remix 全栈开发：数据操作与用户体验优化

Remix 全栈开发：数据操作与用户体验优化

1. 数据操作基础

在现代 Web 应用开发中，数据的读写是至关重要的。Remix 提供了一系列的原语、约定和工具来处理数据的获取和变更。

1.1 服务器端加载器和动作函数

Remix 的服务器端加载器（loader）和动作函数（action）是路由级别的 HTTP 请求处理程序。加载器处理 HTTP GET 请求，用于获取数据；而动作函数接收除 GET 之外的其他 HTTP 请求，用于变更数据。

初始时，Remix 在服务器上渲染应用。所有后续的页面过渡都在客户端进行。在初始请求时，加载器数据用于服务器端渲染；在后续的导航中，Remix 通过 fetch 请求获取加载器数据，并仅重新渲染路由层次结构中发生变化的部分。

1.2 数据变更示例

以下是一个使用 Remix 进行数据变更的示例，以创建费用表单为例：

import { Form, Input, Textarea } from '~/components/forms';
import { Button } from '~/components/buttons';

export default function CreateExpensePage() {
    return (
        <Form method="post" action="/dashboard/expenses/?index">
            <Input label="Title:" type="text" name="titl