在 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

你应该使用 useState 作为你在 Remix 中的 client-side 状态。

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

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

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

关于服务器端渲染

Remix 还 server-side 默认渲染组件。这意味着它会在服务器上执行您的 React 代码以生成 HTML，并使用 JavaScript 代码发送它。这样，浏览器甚至可以在执行 JavaScript 到运行浏览器上的 React 代码之前显示它。

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

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

在 Remix.run 中处理 UI 状态

Handling UI State in Remix.run

javascript

node.js

reactjs

remix.run

关于服务器端渲染