混音基础知识

由柏拉图重新发布

关注： 0

您可能已经听说过很多关于框架块上最新的孩子之一的炒作，Remix。令人惊讶的是，它于 2019 年开始使用，但它最初仅作为基于订阅的高级框架提供。 2021 年，创始人筹集种子资金并将框架开源，让用户开始免费使用 Remix。闸门打开了，每个人似乎都在谈论它，无论好坏。让我们深入了解 Remix 的一些基础知识。

Remix 是一个服务器“边缘”优先的 JavaScript 框架。它使用反应，至少现在（是, 用于前端并优先考虑服务器端渲染应用程序在边缘. 平台可以获取服务器端代码并将其作为无服务器或边缘功能使其比传统服务器更便宜，并使其更接近您的用户。 Remix 的创始人喜欢将其称为“中心堆栈”框架，因为它可以针对正在运行的平台调整服务器和客户端之间的请求和响应。

混音的基础

部署混音

因为 Remix 需要服务器，所以让我们谈谈如何部署它。 Remix 不提供服务器本身——你自带服务器——允许它在任何环境中运行 Node.js的 or 杰诺环境，包括 Netlify 边缘和 DigitalOcean 的应用平台. Remix 本身就是一个编译，一个程序，它为它运行的平台翻译请求。这个过程使用编译器为对服务器的请求创建处理程序。它使用的 HTTP 处理程序建立在网页抓取 API 并在服务器上运行调整他们将部署到的平台。

混音堆栈

混音堆栈是为您预先配置了一些常用工具的项目。有三个官方堆栈由 Remix 团队维护，它们都以音乐流派命名。还有许多社区 Remix 堆栈，包括韩国流行音乐栈由 Netlify 的模板团队创建。这个堆栈是一个强大的，包括一个超级基地数据库和身份验证，顺风对于造型，塞浦路斯(Cypress) 端到端测试，漂亮代码格式化， ESLint 掉毛，和打字稿静态类型。查看 Tara Manicsic 关于部署 K-Pop 堆栈的帖子。

缓存路由

即使 Remix 需要服务器，它仍然可以利用果酱堆缓存路由的好处。静态站点或静态站点生成 (SSG) 是指您的所有内容在构建时呈现并保留静止直到另一个重建。内容是预先生成的，可以放在 CDN 上。这为最终用户提供了许多好处和快速的站点加载。但是，Remix 不像其他流行的 React 框架（包括 Next.js 和 Gatsby）那样做典型的 SSG。要获得 SSG 的一些好处，可以使用原生缓存控制 HTTP 标头在混音中标头功能缓存特定路线或直接在 root.tsx 文件中。

[[headers]]
  for = "/build/*"
  [headers.values]
    "Cache-Control" = "public, max-age=31536000, s-maxage=31536000"

然后添加你的标头功能你想要的地方。这会缓存一小时：

export function headers() {
  return {
    "Cache-Control": "public, s-maxage=360",
  };
};

重新混合路由

许多框架都倾向于基于文件系统的路由。这是一种使用指定文件夹为应用程序定义路由的技术。它们通常具有用于声明动态路由和端点的特殊语法。 Remix 和其他流行框架目前最大的区别在于使用能力嵌套路由.

每个 Remix 应用程序都以 root.tsx 文件。这是呈现应用程序的整个基础的地方。您会在这里找到一些常见的 HTML 布局，例如 <html> 标签 <head> 标记，然后 <body> 带有渲染应用程序所需组件的标签。这里要指出的一件事是 <Scripts> 组件是在网站上启用 JavaScript 的原因；没有它，有些事情会起作用，但不是一切。这 root.tsx 文件作为文件内所有内容的父布局 routes 目录，路由中的所有内容都呈现在 <Outlet/> 组件在 root.tsx. 这是 Remix 中嵌套路由的基础。

嵌套路由

Remix 不仅是由来自反应路由器，它也是使用反应路由器。事实上，他们是将 Remix 的一些优点带回 React Router. Next.js 和 SvelteKit 的维护者现在试图解决的一个复杂问题是嵌套路由。

嵌套路由不同于传统路由。在新路由将用户带到新页面的情况下，每个嵌套路由都是同一页面的单独部分。它允许通过保持业务逻辑仅与需要它的文件相关联来分离关注点。 Remix 能够处理仅限于嵌套路由所在页面部分的错误。页面上的其他路由仍然可用，并且中断的路由可以为错误提供相关上下文，而不会导致整个页面崩溃。

当根文件进入时，Remix 会执行此操作 app/routes 与将在基本文件中加载的文件目录命名相同。根文件变成了布局对于目录中的文件，使用 <Outlet /> 组件告诉 Remix 在哪里加载其他路由。

出口组件

<Outlet /> Component 是 Remix 的一个信号，用于指示它应该在哪里渲染嵌套路由的内容。它放在根目录下的文件中 app/routes 与嵌套路由同名的目录。以下代码进入 app/routes/about.tsx 文件并包括里面文件的出口 app/routes/about 文件夹：

import { Outlet } from "@remix-run/react";

export default function About() {
  return (
    <>
      <section>
        I am the parent layout. I will be on any page inside of my named directory.
      </section>
      { /* All of my children, the files in the named directory, will go here. */ }
      <Outlet />
    </>
  )
}

资料夹结构

中的任何文件 app/routes/ directory 在其名称的 URL 处成为路由。一个目录也可以添加一个 index.tsx 文件中。

app/
├── routes/
│   │
│   └── blog
|   |   ├── index.tsx ## The /blog route
│   └── about.tsx  ## The /about route
│   ├── index.tsx  ## The / or home route
└── root.tsx

如果路由与目录同名，则命名文件成为目录内文件的布局文件，布局文件需要一个出口组件放置嵌套路由。

app/
├── routes/
│   │
│   └── about
│   │   ├── index.tsx
│   ├── about.tsx ## this is a layout for /about/index.tsx
│   ├── index.tsx
└── root.tsx

也可以通过在它们前面加上双下划线 (__).

app/
├── routes/
│   │
│   └── about
│   │   ├── index.tsx
│   ├── index.tsx
│   ├── about.tsx
│   ├── __blog.tsx ## this is also a layout
└── root.tsx

https://your-url.com/about 仍将呈现 app/routes/about.tsx 文件，但也会渲染其中的任何内容 app/routes/about/index.tsx 其中出口组件在标记中 app/routes/about.tsx.

动态路线

动态路由是根据 url 中的信息发生变化的路由。这可能是博客文章的名称或客户 ID，但不管它是什么 $ 添加到路由前面的语法向 Remix 表明它是动态的。名字无关紧要 $ 字首。

app/
├── routes/
│   │
│   └── about
│   │   ├── $id.tsx
│   │   ├── index.tsx
│   ├── about.tsx ## this is a layout for /about/index.tsx
│   ├── index.tsx
└── root.tsx

获取该数据！

由于 Remix 在服务器上呈现其所有数据，因此您看不到很多已成为 React 应用程序标准的东西，例如 useState() 和 useEffect() 钩子，在混音中。对客户端状态的需求较少，因为它已经在服务器上进行了评估。

您使用哪种类型的服务器来获取数据也无关紧要。由于 Remix 位于请求和响应之间并进行适当的翻译，因此您可以使用标准网页抓取 API. Remix 在 loader 功能仅由在服务器上运行并使用 useLoaderData() 钩子来渲染组件中的数据。这是一个使用猫即服务 API 渲染一个随机的猫图像。

import { Outlet, useLoaderData } from '@remix-run/react'

export async function loader() {
  const response = await fetch('<https://cataas.com/cat?json=true>')
  const data = await response.json()
  return {
    data
  }
}

export default function AboutLayout() {
  const cat = useLoaderData<typeof loader>()
  return (
    <>
      <img
        src={`https://cataas.com/cat/${cat}`}
        alt="A random cat."
      />
      <Outlet />
    </>
  )
}

路由参数

在动态路由中，路由前缀为 $ 需要能够访问 URL 参数来处理应该呈现的数据。这 loader 函数可以通过 params 论据。

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>
}

其他混音功能

Remix 有一些其他的辅助函数，可以为普通的 HTML 元素和属性添加额外的功能。路由模块 API. 每个路由都可以定义自己的这些类型的功能。

动作功能

An action 函数允许您使用标准 Web 向表单操作添加额外的功能表单数据接口.

export async function action({ request }) {
  const body = await request.formData();
  const todo = await fakeCreateTodo({
      title: body.get("title"),
  });
  return redirect(`/todos/${todo.id}`);
}

标头功能

不限 HTTP 标准标头可以进去 headers 功能。因为每个路由都可以有一个标头，为了避免与嵌套路由冲突，最深的路由 - 或带有最多正斜杠的 URL (/) — 获胜。您还可以获取通过的标头， actionHeaders, loaderHeaders或 parentHeaders

export function headers({
  actionHeaders,
  loaderHeaders,
  parentHeaders,
}) {
  return {
"Cache-Control": loaderHeaders.get("Cache-Control"),
  };
}

元函数

此函数将为 HTML 文档设置元标记。一个是设置在 root.tsx 默认情况下，文件，但它们可以为每条路线更新。

export function meta() {
  return {
    title: "Your page title",
    description: "A new description for each route.",
  };
};

链接功能

HTML link 元素生活在 <head> HTML 文档的标签，它们会导入 CSS 等。这 links 功能，不要与 <Link /> 元件, 允许您只导入需要它们的路线中的东西。因此，例如，CSS 文件可以限定范围，并且仅在需要这些特定文件的路由上导入。这 link 元素从 a 返回 links() 函数作为对象数组，可以是 HtmlLinkDescriptor 来自 link API 或者 PageLinkDescriptor 可以预取页面的数据。

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/some/styles.css>",
      crossOrigin: "true",
    },
    // add a local stylesheet,
    { rel: "stylesheet", href: stylesHref },

    // prefetch a page's data
    { page: "/about/community" }
  ]
}

路线之间的链接

Remix 提供了一个组件来在您的应用程序中的不同路由之间移动，称为 <Link/>. 要获取客户端路由，请使用 <Link to="">Name</Link> 组件而不是 <a href="">Name</a>。该 <Link /> 组件也需要一个道具 prefetch 接受 none 默认， intent 如果 Remix 检测到用户悬停或聚焦链接，则预取数据，或者 render 它将在链接呈现后立即获取路线的数据。

import { Link } from "@remix-run/react";

export default function Nav() {
  return (
    <nav>
      <Link to="/">Home</Link>{" "}
      <Link to="/about">About</Link>{" "}
      <Link to="/about/community" prefetch="intent">Community</Link>
    </nav>
  );
}

接下来的步骤

现在您了解了 Remix 的基础知识，并且已经准备好开始实际构建应用程序了，对吧？ Remix 提供了一个笑话应用的网络博客教程让您开始实施这些基本知识。您也可以从头开始创建一个全新的 Remix 应用程序。或者，如果您准备好潜入水中，请给出韩国流行音乐栈试一试。我真的很享受在 Remix 上度过的时光，并且喜欢关注 Web 标准并将其回归基础。现在轮到你开始创作了！

时间戳记： 2022 年 9 月 13 日2022 年 9 月 13 日