在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/，您会发现它出现了很多次。

例如，路径模态实例中有一个简单的表单(在app/routes/invoices/$id/edit.tsx中)，用于具有受控输入的表单。

Remix所做的是使客户端和服务器之间的通信变得更容易，方法是将客户端和服务器的代码配置为相同的功能，并提供简单的通信方式。如果需要将数据通信到服务器，这是非常有用的。如果不是这样的话，那么只保留客户端的信息是完全没有问题的。

关于服务器端呈现

默认情况下，混合服务器端还会呈现组件。这意味着它在服务器上执行您的反应代码来生成HTML，并使用JavaScript代码发送它。这样，浏览器甚至可以在执行JavaScript在浏览器上运行反应代码之前显示它。

这意味着，如果您的代码(或您使用的第三方库代码)在您的组件中使用某种浏览器API，您可能需要向服务器端显示该组件。

有一个仅客户端组件示例演示了如何做到这一点。它包括一个示例，其计数器将其值存储在浏览器的本地存储区中。