Möglicherweise haben Sie viel über den neuesten Remix -Framework gehört. Überraschenderweise wurde es 2019 ins Leben gerufen, war jedoch zunächst nur als abonnementbasiertes bezahltes Framework erhältlich. Im Jahr 2021 erhöhte der Gründer Saatgutfonds und öffnete das Framework, damit Benutzer Remix kostenlos verwenden können. Die Schleusen wurden geöffnet und jeder schien darüber zu sprechen, zum Guten oder Schlechten. Lassen Sie uns in einige der Grundlagen von Remix graben.
Remix ist ein JavaScript-Framework, das die Server-Seite (Rand) priorisiert. Derzeit verwendet es React als Front-End und priorisiert serverseitige Rendering-Anwendungen am Rand. Die Plattform kann den serverseitigen Code aufnehmen und ihn als serverlose oder Kantenfunktion ausführen, was billiger ist als ein herkömmlicher Server und näher an Ihren Benutzern. Remix -Gründer nennen es gerne das Framework "Center Stack", da es Anforderungen und Antworten zwischen Servern und Clients basierend auf der Plattform anpasst.
Da Remix einen Server benötigt, diskutieren wir, wie Sie ihn bereitstellen. Remix selbst bietet keinen Server an - Sie müssen ihn selbst zur Verfügung stellen -, um ihn in einer beliebigen Node.js- oder Deno -Umgebung auszuführen, einschließlich Netlify Edge und Digitalocean App -Plattform. Remix selbst ist ein Compiler , ein Programm, das Plattformanforderungen in seine laufende Plattform umwandelt. Dieser Prozess verwendet ESBuild, um Handler für Serveranforderungen zu erstellen. Die von ihr verwendeten HTTP -Handler basieren auf der Web -A -API und werden auf dem Server ausgeführt, indem sie sie an die Plattform einstellen , für die sie bereitgestellt werden soll.
Der Remix-Stack ist ein Projekt, das einige gemeinsame Werkzeuge vorbereitet hat. Das Remix -Team unterhält drei offizielle Stapel, die alle nach dem Musikgenre benannt sind. Darüber hinaus gibt es viele Community-Remix-Stacks, darunter den K-Pop-Stack, der vom Netlify-Vorlagenteam erstellt wurde. Dieser Stapel ist leistungsfähig, einschließlich Supabase-Datenbank und Authentifizierung, Rückenwind für die Stileinstellung, Cypress-End-to-End-Tests, hübscherer Code-Formatierung, Eslint-Code-Überprüfung und statischer Typ-Überprüfung von TypeScript. Schauen Sie sich den Beitrag von Tara Manicsic zum Bereitstellen des K-Pop-Stacks an.
Selbst wenn Remix einen Server benötigt, kann er JamStack mit Cache -Routing nutzen. Die statische Site oder die statische Site -Generierung (SSG) ist, wenn alle Ihre Inhalte zur Build -Zeit gerendert werden und bis zum nächsten Wiederaufbau statisch bleiben. Der Inhalt ist vorgeneriert und kann auf eine CDN platziert werden. Dies bietet viele Vorteile und schnelle Ladegeschwindigkeiten für Endbenutzer. Remix macht jedoch keine typische SSG wie andere beliebte React -Frameworks, einschließlich Next.js und Gatsby. Um einige der Vorteile von SSG zu erzielen, können Sie die native Cache-Kontroll-HTTP-Header in der Funktion Remix Headers verwenden, um spezifische Routen zu lagern, oder sie direkt in der Datei root.tsx-Datei zwischenspeichern.
<code>[[headers]] for = "/build/*" [headers.values] "Cache-Control" = "public, max-age=31536000, s-maxage=31536000"</code>
Fügen Sie dann Ihre Header -Funktionen hinzu, wo Sie sie benötigen. Dies wird für eine Stunde zwischengespeichert:
<code>export function headers() { return { "Cache-Control": "public, s-maxage=360", }; };</code>Viele Frameworks stützen sich auf das systembasierte Routing von Dateien. Dies ist eine Technik, bei der ein angegebener Ordner verwendet wird, um die Anwendungsrouting zu definieren. Sie haben normalerweise eine spezielle Syntax für die Deklarierung dynamischer Routing und Endpunkte. Der größte Unterschied zwischen Remix und anderen beliebten Frameworks ist die Fähigkeit, verschachteltes Routing zu verwenden.
Jede Remix -Anwendung startet mit der Datei root.tsx. Hier werden die Grundlagen der gesamten Anwendung gerendert. Hier finden Sie einige gemeinsame HTML -Layouts, wie z. Etikett, Tags dann<code> Tags und Komponenten, die zum Rendern der Anwendung erforderlich sind. Eine Sache, auf die Sie hier hinweisen können, ist<script></script> 组件启用了网站上的 JavaScript；有些东西无需它也能工作，但并非所有东西都能工作。root.tsx 文件充当 routes 目录中所有内容的父布局，routes 中的所有内容都在 root.tsx 中 <outlet></outlet> 组件所在的位置进行渲染。这是 Remix 中嵌套路由的基础。#### 嵌套路由
Remix 不仅由 React Router 团队的一些成员创建，它还使用 React Router。事实上，他们正在将 Remix 的一些优点带回 React Router。Next.js 和 SvelteKit 的维护人员目前正在努力解决的一个复杂问题是嵌套路由。
嵌套路由与传统路由不同。传统路由会将用户带到新页面，而每个嵌套路由都是同一页面的一个单独部分。它允许通过将业务逻辑仅与需要它的文件相关联来分离关注点。Remix 能够处理仅限于嵌套路由所在页面部分的错误。页面上的其他路由仍然可用，并且损坏的路由可以提供与错误相关的上下文，而不会导致整个页面崩溃。
当 app/routes 中的根文件与将在基本文件中加载的文件目录同名时，Remix 会执行此操作。根文件通过使用 <outlet></outlet> 组件来告诉 Remix 在哪里加载其他路由，从而成为目录中文件的布局。
<outlet></outlet> 组件是 Remix 的一个信号，指示它应该在哪里为嵌套路由渲染内容。它放在 app/routes 目录根目录下的文件中，其名称与嵌套路由相同。以下代码位于 app/routes/about.tsx 文件中，并包含 app/routes/about 文件夹内文件的 outlet：
<code>import { Outlet } from "@remix-run/react";
export default function About() {
return (
<div>
<h1>I am the parent layout. I will be on any page inside of my named directory.</h1>
{/* All of my children, the files in the named directory, will go here. */}
<outlet></outlet>
</div>
)
}</code>app/routes/ 目录中的任何文件都成为其名称 URL 的路由。还可以添加包含 index.tsx 文件的目录。
<code>app/ ├── routes/ │ │ │ └── blog | | ├── index.tsx ## The /blog route │ └── about.tsx ## The /about route │ ├── index.tsx ## The / or home route └── root.tsx</code>
如果路由的名称与目录相同，则命名文件将成为目录内文件的布局文件，并且布局文件需要一个 Outlet 组件来放置嵌套路由。
<code>app/ ├── routes/ │ │ │ └── about │ │ ├── index.tsx │ ├── about.tsx ## this is a layout for /about/index.tsx │ ├── index.tsx └── root.tsx</code>
还可以通过在布局文件名前添加双下划线 (__) 来创建布局。
<code>app/ ├── routes/ │ │ │ └── about │ │ ├── index.tsx │ ├── index.tsx │ ├── about.tsx │ ├── __blog.tsx ## this is also a layout └── root.tsx</code>
https://www.php.cn/link/232a03118725240918c5a4a0ab33e9b3 仍然会渲染 app/routes/about.tsx 文件，但也会在 app/routes/about.tsx 的标记中 <outlet></outlet> 组件所在的位置渲染 app/routes/about/index.tsx 中的内容。
动态路由是根据 url 中的信息而变化的路由。这可能是博客文章的名称或客户 ID，但无论是什么，添加到路由前面的 $ 语法都会向 Remix 发出信号，表明它是动态的。除了 $ 前缀外，名称无关紧要。
<code>app/ ├── routes/ │ │ │ └── about │ │ ├── $id.tsx │ │ ├── index.tsx │ ├── about.tsx ## this is a layout for /about/index.tsx │ ├── index.tsx └── root.tsx</code>
由于 Remix 在服务器上渲染所有数据，因此在 Remix 中看不到很多已成为 React 应用程序标准的内容，例如 useState() 和 useEffect() 钩子。由于数据已在服务器上进行了评估，因此对客户端状态的需求减少了。
使用哪种类型的服务器来获取数据也无关紧要。由于 Remix 位于请求和响应之间并对其进行适当的转换，因此您可以使用标准 Web Fetch API。Remix 在一个仅在服务器上运行的 loader 函数中执行此操作，并使用 useLoaderData() 钩子在组件中渲染数据。这是一个使用 Cat as a Service API 渲染随机猫图像的示例。
<code>import { Outlet, useLoaderData } from '@remix-run/react'
export async function loader() {
const response = await fetch('https://cataas.com/cat')
const data = await response.json()
return {
data
}
}
export default function AboutLayout() {
const cat = useLoaderData<typeof loader>()
return (
<div>
<img alt="A random cat." src="%7B%60https://cataas.com/cat/%24%7Bcat.id%7D%60%7D">
<outlet></outlet>
</div>
)
}</typeof></code>在动态路由中，以 $ 为前缀的路由需要能够访问 URL 参数以处理应该渲染的数据。loader 函数可以通过 params 参数访问这些参数。
<code>import { useLoaderData } from '@remix-run/react'
import type { LoaderArgs } from '@remix-run/node'
export async function loader({ params }: LoaderArgs) {
return {
params
}
}
export default function AboutLayout() {
const { params } = useLoaderData<typeof loader>()
return <p>The url parameter is {params.tag}.</p>
}</typeof></code>Remix 还有一些其他辅助函数，可以为路由模块 API 中的普通 HTML 元素和属性添加额外功能。每个路由都可以定义自己类型的这些函数。
Action 函数允许您使用标准 web FormData API 向表单操作添加额外功能。
<code>export async function action({ request }) {
const body = await request.formData();
const todo = await fakeCreateTodo({
title: body.get("title"),
});
return redirect(`/todos/${todo.id}`);
}</code>任何 HTTP 标准标头都可以放在 headers 函数中。因为每个路由都可以有一个标头，为了避免与嵌套路由冲突，最深的路由——或具有最多正斜杠 (/) 的 URL——获胜。您还可以获取传递的标头，actionHeaders、loaderHeaders 或 parentHeaders
<code>export function headers({
actionHeaders,
loaderHeaders,
parentHeaders,
}) {
return {
"Cache-Control": loaderHeaders.get("Cache-Control"),
};
}</code>此函数将设置 HTML 文档的元标记。默认情况下，在 root.tsx 文件中设置了一个，但可以为每个路由更新它们。
<code>export function meta() {
return {
title: "Your page title",
description: "A new description for each route.",
};
};</code>HTML link 元素位于 HTML 文档的 标签中，它们导入 CSS 等。links 函数（不要与 <link> 组件混淆）允许您仅在需要它们的路由中导入内容。因此，例如，CSS 文件可以进行范围限定，并且仅在需要这些特定文件的路由中导入。link 元素作为对象数组从 links() 函数返回，可以是 link API 的 HtmlLinkDescriptor 或可以预取页面数据的 PageLinkDescriptor。
<code>export function links() {
return [
// add a favicon
{
rel: "icon",
href: "/favicon.png",
type: "image/png",
},
// add an external stylesheet
{
rel: "stylesheet",
href: "https://example.com/styles.css",
crossOrigin: "true",
},
// add a local stylesheet,
{ rel: "stylesheet", href: stylesHref },
// prefetch a page's data
{ page: "/about/community" }
]
}</code>Remix 提供了一个组件来在应用程序的不同路由之间跳转，称为 <link>。要获得客户端路由，请使用 <link to=""> 组件而不是 <a href="">Name</a>。<link> 组件还带有一个 prefetch 属性，默认情况下接受 none，如果 Remix 检测到用户将鼠标悬停或聚焦链接，则打算预取数据，或者渲染将立即获取路由的数据，一旦链接被渲染。
<code>import { Link } from "@remix-run/react";
export default function Nav() {
return (
<nav>
<link to="/">Home
<link to="/about">About
<link prefetch="intent" to="/about/community">Community
</nav>
);
}</code>现在您已经了解了 Remix 的基础知识，您准备好开始实际构建应用程序了吗？Remix 提供了一个笑话应用程序和一个博客教程来帮助您开始实施这些基本知识。您也可以从头开始创建一个全新的 Remix 应用程序。或者，如果您准备深入研究，请尝试使用 K-Pop 堆栈。我非常享受使用 Remix 的时光，并且喜欢它对 Web 标准的关注以及回归基础。现在轮到您开始创建了！
Das obige ist der detaillierte Inhalt vonDie Grundlagen von Remix. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
So richten Sie den Ruhezustand im Win7-System ein
Wie man mit virtueller Währung handelt
Allgemeine OGG-Befehle
Win10-Upgrade-Patch-Methode
So lernen Sie die Python-Programmierung von Grund auf
So lösen Sie das Problem, dass CSS nicht geladen werden kann
Was sind die Oracle-Wildcards?
So erhalten Sie Bitcoin
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
