[{"_1":2,"_49":-5,"_50":-5},"loaderData",{"_3":4,"_47":-5,"_48":-5},"client/articles",{"_5":6,"_19":20},"metaInfo",{"_7":8,"_9":10,"_11":12,"_13":10,"_14":10,"_15":16,"_17":18},"id","67ac94a08b65df476fae25e8","pageTitle","文章列表","pagePath","/articles","pagePriefTitle","pagePriefContent","keywords","web前端, React, Remix, HTML5, CSS3, html, CSS, JavaScript, HarmonyOS NEXT","description","web前端, HTML5, CSS3, html, CSS, JS, JavaScript, HarmonyOS NEXT","articles",[21,40],{"_7":22,"_23":24,"_25":26,"_27":28,"_29":28,"_30":31,"_32":33,"_34":35,"_36":37,"_38":39},"67ac05c5b95a0de07250817c","createdAt",["D",1739326917867],"updatedAt",["D",1758148453138],"title","Remix 全栈数据流","subTitle","content","# 全栈数据流\n\nRemix 的主要功能之一是它如何自动使您的 UI 与持久服务器状态保持同步。它分三个步骤进行\n\n1. 路由加载器向 UI 提供数据\n2. 表单将数据发布到更新持久状态的路由操作\n3. 页面上的加载器数据会自动重新验证\n\n## 路由模块导出\n让我们考虑一个用户帐户编辑路由。路由模块有三个导出，我们将填充并讨论它们\n\n```javascript\nexport async function loader() {\n // provides data to the component\n}\n\nexport default function Component() {\n // renders the UI\n}\n\nexport async function action() {\n // updates persistent data\n}\n```\n\n## 路由加载器\n\n路由文件可以导出一个loader函数，该函数向路由组件提供数据。当用户导航到匹配的路由时，首先加载数据，然后渲染页面。\n\n```javascript\nimport type { LoaderFunctionArgs } from \"@remix-run/node\"; // or cloudflare/deno\nimport { json } from \"@remix-run/node\"; // or cloudflare/deno\n\nexport async function loader({\n request,\n}: LoaderFunctionArgs) {\n const user = await getUser(request);\n return json({\n displayName: user.displayName,\n email: user.email,\n });\n}\n\nexport default function Component() {\n // ...\n}\n\nexport async function action() {\n // ...\n}\n```\n\n## 路由组件\n\n路由文件的默认导出是渲染的组件。它使用useLoaderData读取加载器数据\n\n```javascript\nimport type { LoaderFunctionArgs } from \"@remix-run/node\"; // or cloudflare/deno\nimport { json } from \"@remix-run/node\"; // or cloudflare/deno\nimport { useLoaderData, Form } from \"@remix-run/react\";\n\nexport async function loader({\n request,\n}: LoaderFunctionArgs) {\n const user = await getUser(request);\n return json({\n displayName: user.displayName,\n email: user.email,\n });\n}\n\nexport default function Component() {\n const user = useLoaderData();\n return (\n

Settings for {user.displayName}

\n\n \n \n\n \n \n );\n}\n\nexport async function action() {\n // ...\n}\n```\n## 路由操作\n\n最后，当提交表单时，将调用与表单的 action 属性匹配的路由上的操作。在此示例中，它是同一路由。表单字段中的值将在标准request.formData() API 上可用。请注意，输入上的 name 属性与formData.get(fieldName) getter 耦合。\n\n```javascript\nimport type {\n ActionFunctionArgs,\n LoaderFunctionArgs,\n} from \"@remix-run/node\"; // or cloudflare/deno\nimport { json } from \"@remix-run/node\"; // or cloudflare/deno\nimport { useLoaderData, Form } from \"@remix-run/react\";\n\nexport async function loader({\n request,\n}: LoaderFunctionArgs) {\n const user = await getUser(request);\n return json({\n displayName: user.displayName,\n email: user.email,\n });\n}\n\nexport default function Component() {\n const user = useLoaderData();\n return (\n

Settings for {user.displayName}

\n\n \n \n\n \n \n );\n}\n\nexport async function action({\n request,\n}: ActionFunctionArgs) {\n const formData = await request.formData();\n const user = await getUser(request);\n\n await updateUser(user.id, {\n email: formData.get(\"email\"),\n displayName: formData.get(\"displayName\"),\n });\n\n return json({ ok: true });\n}\n```\n\n## 提交和重新验证\n当用户提交表单时\n\n1. Remix 通过 fetch 将表单数据发送到路由操作，并且可以通过 useNavigation 和 useFetcher 等 hook 获得待处理状态。\n2. 操作完成后，将重新验证加载器以获取新的服务器状态。\n3. useLoaderData 返回服务器的更新值，并且待处理状态恢复为空闲。\n\n通过这种方式，UI 可以与服务器状态保持同步，而无需编写任何代码来进行同步。\n\n除了 HTML 表单元素（例如，响应拖放或 onChange 事件）之外，还有多种提交表单的方法。关于表单验证、错误处理、待处理状态等，还有很多要讨论的内容。我们稍后会讨论所有这些，但这只是 Remix 中数据流的要点。\n\n## 在 JavaScript 加载之前\n\n当您从服务器发送 HTML 时，最好让它在 JavaScript 加载之前也能工作。Remix 中的典型数据流会自动执行此操作。流程相同，但浏览器会完成一些工作。\n\n当用户在 JavaScript 加载之前提交表单时\n\n1. 浏览器将表单提交到操作（而不是 fetch），并且浏览器的待处理状态会激活（旋转的网站图标）\n2. 操作完成后，将调用加载器\n3. Remix 渲染页面并将 HTML 发送到浏览器","state","PUBLISHED","author","Zhifei.Yu","tags","React,Remix,SSR","visits",92,{"_7":41,"_23":42,"_25":43,"_27":44,"_29":44,"_30":45,"_32":33,"_34":35,"_36":-5,"_38":46},"67ab4e6f4cc77e7132b2f1b4",["D",1739279983542],["D",1758008928845],"Hello Remix","# Hello Remix",40,"root","client/layout","actionData","errors"]