在 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，您可能需要指示不要在服務器端呈現該組件。

有一個僅客戶端組件示例演示了如何執行此操作。 它包括一個示例，其中一個計數器將其值存儲在瀏覽器的本地存儲中。