在 Remix.run 中处理 UI 状态

Question

我正在尝试混音，哦天哪..我坚持创建一个简单的计数器（单击按钮增加计数）

我想我不应该使用 useState 钩子，所以我尝试了加载器和操作，因为我相信这是应该在 Remix 中处理它的地方

我的组件上有：

export default function Game() {
    const counter = useLoaderData();

    return (
        <>
            <div>{counter}</div>
            <div>
                <Form method="post">
                    <button type="submit">click</button>
                </Form>
            </div>
        </>
    );
}

服务器：

import { ActionFunction, LoaderFunction } from 'remix';

let counter: number = 0;

export const loader: LoaderFunction = async () => {
    console.log('game object!', counter);
    return counter;
};

export let action: ActionFunction = async ({ request, params }) => {
    console.log('[action] game object!', ++counter);
    return counter;
};

上面的代码每次点击时计数器都会重置为 0

查看了一些存储库，我可以找到存储在 Cookie/DB/SessionStorage 等中的存储库，但是如果我只想为我的 UI 提供一个简单的状态怎么办？

Answer 1

您应该在 Remix 中用于useState客户端状态。

如果您克隆混音存储库并grep -r useState在remix/examples/文件夹中执行 a，您会发现它多次出现。

例如，您在“路线”模式示例（在 中app/routes/invoices/$id/edit.tsx）中有一个简单的示例，用于具有受控输入的表单。

Remix 的作用是通过将相同功能的代码放在一起，并提供执行该通信的简单方法，使客户端和服务器之间的通信变得更容易。如果您需要将数据传送到服务器，这非常有用。如果不是这种情况，那么只将该信息保留在客户端上是完全可以的。

关于服务器端渲染

默认情况下，Remix 还会在服务器端渲染组件。这意味着它会在服务器上执行您的 React 代码以生成 HTML，并将其与 JavaScript 代码一起发送。这样，浏览器甚至可以在执行 JavaScript 以在浏览器上运行 React 代码之前显示它。

这意味着，如果您的代码（或您使用的第三方库代码）在组件中使用某些浏览器 API，您可能需要指示不要在服务器端渲染该组件。

有一个仅客户端组件示例演示了如何执行此操作。它包括一个示例，其中计数器将其值存储在浏览器的本地存储中。