在 Remix.run 中处理 UI 状态

Question

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

我想我不应该使用 useState 钩子，所以我用 loader 和 action 试试运气，因为我相信这是应该在 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

您应该使用useState作为 Remix 中的客户端状态。

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

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

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

关于服务器端渲染

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

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

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