Remix JavaScript

2025 年 3 月 3 日 | 阅读 6 分钟

什么是 Remix.JS？

在 JavaScript 中，Remix JS 是一个基于 React 的全栈框架，它可以帮助我们在服务器端渲染代码，与在客户端使用 React 相比，这可以带来更好的性能和 SEO。

简单来说，Remix 的设计目的是简化复杂的任务，如嵌套路由、数据获取和表单处理。Remix.js 是一个强大而灵活的 JavaScript 框架，用于构建 Web 应用程序。

在 JavaScript 中，remix.js 提供了许多有助于开发人员的特性，使其成为他们的热门选择。它还具有一些高级功能和内置设计，使我们在交付高性能、健壮的应用程序的同时，可以简化开发过程。

在 JavaScript 中，它是一个全面的框架，通过结合服务器端渲染的优势以及客户端 JavaScript 的灵活性和交互性，帮助开发人员构建 Web 应用程序。

Remix.JS 的特性

Remix.JS 有一些特性，例如：

路由

Remix.js 支持基于文件结构的路由，该路由构建在 React Router 之上。使用 remix.js，我们可以创建嵌套路由。嵌套路由可以从父路由组件继承其 UI。

数据获取

在 JavaScript 中，我们导出一个 React 组件作为前端 UI。使用 remix.js，我们可以定义一个 loader 函数，它将在服务器上获取数据并将其发送到前端。React 组件可以通过使用 useLoaderData hook 来访问获取到的数据。

错误处理

使用 Remix，我们代码中的大多数错误都会在服务器或浏览器中自动捕获，并且 Error boundary 会在错误发生的地方渲染。

轻松访问 <head> 标签和文档

在 JavaScript 中，任何路由模块都可以方便地访问 head 标签。借助此功能，我们可以非常轻松地添加 meta 标签、描述和 CSS 链接。

TypeScript 支持

我们开箱即用地获得 TypeScript 支持，可以轻松地使用 TypeScript 生成样板应用程序。

安装 Remix.js

步骤 1：安装和验证 Node 版本

在创建 Remix 应用程序之前，请确保我们已安装 node.js 和 npm。如果已安装 node.js，则可以从其官方网站下载。现在，如果您想确认安装，需要运行以下命令：

 
npm -v
node -v   

步骤 2：初始化 Remix 项目

现在您需要创建一个新文件夹并在终端中导航到该文件夹。然后运行以下命令来创建最新版本的 Remix 应用。

步骤 3：选择所需选项

随着安装的进行，系统会提示我们选择一个服务器。继续选择我们熟悉的服务器。

步骤 4：选择语言

之后，我们需要输入我们想使用的编程语言，例如 JavaScript/TypeScript，然后继续安装。

步骤 5：切换到项目目录

现在您可以使用以下命令更改项目文件夹

项目结构

在 JavaScript 中，package.json 文件中的依赖项列表是：

 
{
  "name": "my-remix-app",
  "private": true,
  "sideEffects": false,
  "type": "module",
  "scripts": {
    "build": "remix vite:build",
    "dev": "remix vite:dev",
    "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
    "start": "remix-serve ./build/server/index.js",
    "typecheck": "tsc"
  },
  "dependencies": {
    "@remix-run/node": "^2.11.2",
    "@remix-run/react": "^2.11.2",
    "@remix-run/serve": "^2.11.2",
    "isbot": "^4.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@remix-run/dev": "^2.11.2",
    "@types/react": "^18.2.20",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.7.4",
    "@typescript-eslint/parser": "^6.7.4",
    "autoprefixer": "^10.4.19",
    "eslint": "^8.38.0",
    "eslint-import-resolver-typescript": "^3.6.1",
    "eslint-plugin-import": "^2.28.1",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "postcss": "^8.4.38",
    "tailwindcss": "^3.4.4",
    "typescript": "^5.1.6",
    "vite": "^5.1.0",
    "vite-tsconfig-paths": "^4.2.1"
  },
  "engines": {
    "node": ">=20.0.0"
  }
}   

Remix 应用中的路由在 app/routes 中进行管理。它支持基于文件结构的路由。

让我们创建 users/index.js 和 user/$id.jsx 来实现路由，如下面的示例所示。

示例

此示例通过 useParams() hook 在 index.jsx 中实现了基本路由，在 $id.jsx 中实现了动态路由。

 
// Filename - /app/routes/users/index.jsx
const Users = () => {
    return (
        <h1>All Users</h1>
    )
 }
  export default Users   

 
// Filename - /app/routes/users/$id.jsx

import { useParams } from "remix";

const User = () => {

  // To access all the parameters
  // in the route
  const params = useParams();

  // Destructuring id from params.
  const id = params.id;

  return <h1>User with id : {id}</h1>;
};
export default User;   

输出

Remix.js 路由

在 JavaScript 中，remix 使用基于文件系统的路由，这意味着每个路由都有自己的模块。它允许清晰地分离关注点，并使应用程序的不同部分易于理解。

现在，要定义一个路由，您需要在 routes 目录中创建一个名为路由名称的新文件。

Remix.js 路由类型

Remix 支持的路由类型如下：

索引路由
动态段路由
无路径布局路由
通配符路由

Remix.js Hooks

在 JavaScript 中，Remix.js hooks 允许开发人员无缝地将 Remix 特定功能集成到他们的 React 组件中。它解析组件所需的数据。

有一些 hook 可供开发人员使用，以访问 remix 框架的功能。

useActionData: 在 JavaScript 中，它帮助我们处理表单提交，它提供了一个在表单提交时调用的函数，同时仍然允许默认的表单提交行为。

useLoaderData: 在 JavaScript 中，它检索在服务器端渲染期间设置的数据，这使您能够使用获取到的数据在客户端渲染您的组件。

Remix.js 服务器端默认函数

在 Remix.js 中，有几个默认函数在服务器端执行，以处理应用程序的各个方面。以下是一些常用的默认函数。

loader: 它在服务器端渲染期间在服务器上执行。它在渲染 React 组件之前获取数据并准备应用程序的初始状态。

action: 当分派操作时，它在服务器上运行。它处理表单提交和其他用户触发的操作。它可以处理表单数据，从而进行数据库更新或执行其他服务器端操作。

meta: 在 remix.js 中，我们可以定义与路由相关的元数据，例如页面标题和描述。它在服务器上执行并返回一个包含所需元数据值的对象。

headers: 它允许为特定路由设置自定义 HTTP 标头。在服务器上运行并返回一个包含标头键值对的对象。

json: 服务器通过运行并返回一个 JavaScript 对象来发送 JSON 响应，该对象随后被序列化为 JSON 并作为响应发送到客户端。

示例

让我们看一个如何一起使用 remix hooks 和服务器端默认函数的示例。

 
import { useLoaderData } from '@remix-run/react';
export async function loader() {
  const data = await fetchData(); // Fetch data from an API or other data source
  return { data };
}
export function MyComponent() {
  let { data } = useLoaderData();
  return (
    <div>
      <h1>{ data }</h1>
    </div>
  );
}   

Remix.js 的优点

在 JavaScript 中，remix 只支持 SSR，也称为服务器端渲染。
通过在 JavaScript 中使用 remix，我们可以构建一个完整全栈应用程序，而无需单独的后端服务器和代码库。
在 JavaScript 中，只有两种加载数据的方法。第一个是 loader 函数，它是服务器端的；第二个是 useFetcher hook，它是客户端使用的。
它还开箱即用地支持 cookie 和会话。
在 JavaScript 中，remix 是 HTTP 服务器内的请求处理程序，它允许您利用任何服务器。

Remix.js 的缺点

在 JavaScript 中，Remix 最显著的缺点是您不再拥有可用的客户端状态。
它不适合基于聊天的应用程序。
在 JavaScript 中，remix 需要重新获取所有可见路由的数据，除非您访问子路由。
Remix 需要更多的服务器请求。
它增加了数据库和/或缓存的读取次数，这可能会增加您的项目成本。
自动化测试更难，因为没有客户端状态，您必须编写更多的端到端测试。

结论

总之，remix 无缝地结合了服务器端渲染和 React 的客户端优势，提供了诸如嵌套路由、编程增强和高效数据加载等功能。它旨在通过直观的开发体验和现代 Web 标准来构建高性能、可扩展的 Web 应用程序。

下一个主题JavaScript 货币转换器

Remix JavaScript

什么是 Remix.JS？

Remix.JS 的特性

安装 Remix.js

步骤 2：初始化 Remix 项目

步骤 3：选择所需选项

步骤 4：选择语言

步骤 5：切换到项目目录

Remix.js 路由

Remix.js Hooks

Remix.js 服务器端默认函数

Remix.js 的优点

Remix.js 的缺点

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

Remix JavaScript

什么是 Remix.JS？

Remix.JS 的特性

安装 Remix.js

步骤 2：初始化 Remix 项目

步骤 3：选择所需选项

步骤 4：选择语言

步骤 5：切换到项目目录

Remix.js 路由

Remix.js Hooks

Remix.js 服务器端默认函数

Remix.js 的优点

Remix.js 的缺点

结论

相关帖子

JavaScript 中的内联函数

按键对 JavaScript 对象数组进行排序

JavaScript 中的阿姆斯特朗数

如何使用 JavaScript 禁用单选按钮