在 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 作为您的客户端状态。

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

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

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

关于服务器端渲染

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

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

有一个Client only components example 演示了如何做到这一点。它包含一个示例，其中一个计数器将其值存储在浏览器的本地存储中。