JavaScript 仍然是最常用的编程语言之一。 因此，这种编程语言也有许多库和框架。 React 是最流行的 JavaScript 库之一。
React 还附带了许多旨在执行不同功能的框架和库。 Web 框架提供了创建 Web 应用程序的结构化方法。 框架不是从头开始创建所有内容，而是提供开发人员可以在其应用程序中使用的可重用代码。
混音 是最近获得广泛关注的最新 React Web 框架之一。 本文将定义什么是 Remix 框架、其功能、如何设置、Remix 的用例及其局限性。
目录
什么是混音框架？
Remix 是一个构建在 React 之上的全栈 Web 开发框架。 您可以使用 Remix 应用程序来创建应用程序的后端和前端。 Remix 可让您专注于 UI，并帮助您提供弹性且快速的用户体验。
该框架可以描述为四个部分：编译器、浏览器框架、服务器框架和 HTTP 处理程序。
Remix 最初是一项付费服务，但于 2021 年底开源。 2022 年被 Shopify 收购。
混音框架功能
- Remix 堆栈：此 Remix CLI 功能允许您快速生成 Remix 应用程序。 其中一些堆栈是内置的。 您还可以自己从头开始创建应用程序。 官方内置堆栈具有自动部署管道、数据库、测试、身份验证和 linting 等功能。 其中一些堆栈是流行的 Blues Stack、Indie Stack 和 垃圾堆栈。
- 服务器端渲染（SSR）：该框架支持 React 组件的服务器端渲染。 Remix 上的初始渲染发生在服务器上，将完全渲染的 HTML 文档发送到客户端。 服务器端渲染有几个好处，例如提高可访问性、允许搜索引擎抓取内容以及提高速度。
- 使用嵌套路由进行路由：Remix 使用 React Router 6。使用此框架，您只需将文件放入路由文件夹中，Remix 的路由模块会将它们转换为可导航的路径。 嵌套路由是包含在另一个路由中的路由。
- 支持 TypeScript 和 JavaScript：无论您使用 JavaScript 还是 TypeScript，都可以使用 Remix。 使用 TypeScript 的优点是它允许您声明变量并可以轻松及早捕获错误。
- 内置数据加载和缓存：该框架允许开发人员定义从各种来源获取数据的加载器。 Remix 处理客户端和服务器端的数据获取。 该框架提供的缓存机制可以轻松减少不必要的数据获取并优化后续请求。
- 代码分割和预取：您可以根据需要将 Remix 应用程序中的代码分割成小的、可加载的位。 这种方法减少了初始包大小和在后台加载数据和代码的预取功能。
Remix 框架的好处
- 全栈：大多数人使用不同的语言或框架来创建应用程序的客户端和服务器端。 例如，您可以使用 React 作为前端，并使用 Node.js 框架（例如 ExpressJS）作为后端。 在其他情况下，您可以在后端使用 Django 等 Python 框架。 Remix 是一个全栈框架，这意味着您的前端和后端将位于同一个应用程序上。
- 出色的数据处理：Remix 依赖于本机浏览器功能和约定。 卓越的数据流使您的应用程序的前端和后端之间的数据传输变得容易。
- 简单的状态处理：在 React 应用程序中管理状态可能很痛苦，大多数开发人员都使用 Redux 等第三方库。 混音用途 装载机 管理服务器端的状态。 您可以使用当前路由中任何组件的“useLoaderData”属性。
- 错误边界：如果您在 Remix 应用程序中的嵌套路由或组件中遇到错误，则错误将仅限于该组件。 这样的错误不会像其他框架那样破坏整个应用程序。 尽管您可以在 Next.js 等一些 React 框架中实现错误边界功能，但该功能是内置在 Remix 中的。
设置 Remix 应用程序的先决条件
如果您想设置 Remix 应用程序，您需要以下一些东西；
- Node.js 14.17.0 或更高版本
- 像 npm 这样的包管理器（7 或更高版本）
- 代码编辑器
- 了解 React 应用程序的工作原理
如何设置“你好，世界！” 混音上
我们将创建一个简单的项目并将其命名为“Remix-app”。 你可以跟随；
- 导航到您要创建应用程序的位置，打开终端并运行此命令；
npx [email protected] remix-app
终端将提示您回答几个问题并设置您的应用程序。 我们可以坚持基础知识并选择 TypeScript 作为我们的语言。
- 导航到创建的应用程序（Remix-app）并在您最喜欢的代码编辑器中打开它。 文件夹结构如下；
- 使用此命令构建您的应用程序；
npm run build
- 使用此命令启动开发服务器；
npm start
现在，您可以使用 http://localhost:3000 链接在浏览器上打开窗口，该窗口将显示在您的浏览器上；
- 使用以下内容修改 app/root.tsx 文件的内容；
import { LiveReload } from "@remix-run/react";
export default function App() {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta
name="viewport"
content="width=device-width,initial-scale=1"
/>
<title>Remix Demo</title>
</head>
<body>
Hello world
<LiveReload />
</body>
</html>
);
}
渲染后的页面如下；
Remix框架用在哪里
就像 Next.js 和 React 一样，Remix 可用于构建不同的应用程序类型。 这些是一些最佳用例；
- 单页应用程序：Remix 应用程序中的所有代码都会加载一次。 服务器渲染方法允许快速初始加载，同时客户端无缝处理后续请求。
- SEO 友好的网站：Remix 使用预渲染功能生成静态 HTML 页面。 这使得即使您正在处理动态内容也可以为网站建立索引。
- 动态网站：Remix 在其应用程序中使用服务器端渲染。 SSR 在将 HTML 页面发送到客户端之前加载服务器上的页面。 因此，Remix 非常适合动态生成内容的网站。
Remix 框架如何在服务器端和客户端工作
服务端渲染
Remix 在服务器端以纯 HTML 形式呈现您的代码。 这种方法减少了 JavaScript 的数量，从而提高了加载速度。 Remix 基本上使用原生的“action”和“loader”功能。 服务器将执行您提供的任何服务器端操作，以纯文本和 HTML 形式呈现 React 代码，然后将其发送到客户端浏览器。
客户端渲染
Remix 与 Next.js 一样，提供“预取”功能，为用户提供流畅的导航。
在 Next.js 中， 组件允许我们的网站预加载 重定向到的页面，而不必等待页面下载。 然而，这种方法仅适用于静态网站。
Remix 使用 功能，可以轻松获取
混音限制
- 小社区：Remix 原本是一个付费框架。 然而，它是在 2021 年开源的，而且还很年轻。 这意味着有限的资源和工具无法让您的应用程序创建变得轻而易举。
- 更陡峭的学习曲线：Remix 引入了嵌套路由概念，如果您来自 React 或其框架（如 Next.js），可能会感到困惑。 然而，一旦你掌握了这个框架，使用这个框架就会变得很容易。
混音的未来是什么？
- 我们可能会看到更多的采用：Remix 还很年轻。 开发人员可能还没有发现它的潜力，未来我们可能会看到更多的公司和开发人员使用它。
- 生态系统可能会增长：Remix 仍然没有什么工具和库来支持其生态系统。 随着其采用率的增长，我们可以期待更多的工具和库。
- 社区将会成长：社区对于框架/编程语言的成长至关重要。 我们期望随着开发者发现 Remix 的瑰宝，社区不断发展。
Remix 比 Next.js 更好吗？
这个问题的答案将取决于您正在创建的应用程序的性质。 如果你想使用一个框架构建一个全栈应用程序，Remix 将比 Next.js 更好。 但是，如果您想要一个拥有大量资源和良好追随者的成熟框架，Next.js 将是您的完美选择。
Remix 是一个好的框架吗？
是的。 它是一个很好的框架，可以使用一个框架构建整个全栈应用程序。 如果您想要内置错误边界功能的技术，它也是一个很棒的框架。 但是，如果您想要一个拥有大型社区和大量资源的框架，那么 Remix 并不是正确的框架。
Remix JS 制作准备好了吗？
是的。 如果您熟悉部署 Node.js 应用程序，那么使用和部署 Remix 应用程序也将变得轻而易举。
我应该学习 Remix 还是 React？
Remix 是一个 React 框架。 因此，在开始学习 Remix 之前，您需要了解 React 的工作原理。 但是，如果您的时间有限并且您只想学习一种框架，那么选择将取决于您的最终目标。
Remix 允许您构建全栈应用程序。 即使你没有掌握React，你也可以学习Remix，但学习曲线会很陡。
但是，如果您使用 React，并且想要一个全栈应用程序，则必须使用 Django 或 Ruby on Rails 等后端框架。 如果您决定学习 React，您可以依靠它的许多资源和社区。
结论
现在确定 Remix 是否是 Web 开发的未来还为时过早。 它令人惊叹的特性，例如灵活的路由、服务器端渲染、代码分割以及对开发人员体验的关注，使其成为一个非常有前途的Web框架。
然而，Remix还很年轻，其资源仍然有限。 它还有一个小社区。 Remix JS 框架的工具和库很少，因为大多数开源框架都依赖于社区支持和第三方工具。
您还可以探索一些框架和库，以了解全栈开发人员的知识。