Fastify 与 React：构建完整的堆栈实践-JavaScript中文网-JavaScript教程资源分享门户

本文将介绍如何使用 Fastify 和 React 共同构建完整的堆栈实践，探讨这两个工具之间的协作和优化。我们将从 Fastify 的介绍、安装和运行开始，然后转到 React 和它的生命周期、组件和优化。最后，我们将深入探讨如何整合这两个工具，使用 Fastify 作为后端框架，使用 React 作为前端框架，创建一个完整的 web 应用程序。

Fastify

Fastify 是一个快速、低开销、可扩展的 Node.js web 服务框架，旨在与 Express、Koa 等传统框架进行竞争。与这些框架相比，Fastify 有更好的性能和更多的优势，包括：

高度模块化并且易于扩展。
友好的开发者体验，包括安全路由、自动加载、生命周期钩子等。
支持 async/await，并与 Node.js 的最新版本兼容。
集成多个插件，例如 Swagger、JWT、ORM 等。

安装和运行

在开始使用 Fastify 之前，您需要安装 Node.js，并创建一个新的项目目录。然后，您可以使用 npm 初始化该目录，并将 Fastify 添加为您的依赖项：

npm init -y
npm i fastify

在安装完成后，您可以使用以下代码创建 Fastify 服务器：

// javascriptcn.com 代码示例
const fastify = require('fastify')();

fastify.get('/', async (request, reply) => {
  return { hello: 'world' };
});

fastify.listen(3000, (err) => {
  if (err) {
    console.error(err);
    process.exit(1);
  }
  console.log('Server running on port 3000');
});

以上的代码通过启动一个 Fastify 服务，在根路由上返回一个 JSON 对象。您可以通过访问 http://localhost:3000 来尝试运行它。

Fastify 插件

Fastify 拥有一个强大的插件生态系统，通过这些插件，您可以轻松扩展功能并提高性能。以下是常用的一些 Fastify 插件：

cors: 提供 CORS（跨越资源共享）支持。
helmet: 用于增加 HTTP 安全头。
swagger: 创建和提供 Swagger UI。
fastify-jwt: 用于验证 JSON Web Tokens。
fastify-sqlite3: 使用 SQLite 数据库。

以上是一些示例性的插件，您可以通过 NPM 搜索 Fastify 插件，以找到更多适合您项目的插件。

React

React 是一个 JavaScript 库，用于构建用户界面。React 把用户界面分解成组件，这些组件可以嵌套和组合在一起，促进了代码重用和模块化。React 包括许多特性和功能，其中一些值得一提：

Virtual DOM: React 使用虚拟 DOM 来管理状态的更新，使得页面渲染速度更快。
生命周期: 组件在渲染中通过生命周期方法定义了各个阶段的行为。
Hooks: Hooks 是一种新的 API，使得函数组件可以使用类组件中的状态和生命周期方法。

创建 React 应用

要开始创建一个新的 React 应用程序，您可以使用 create-react-app 包。该包提供了一个初始化的 React 应用程序，该应用程序包括一个示例组件以及构建和运行应用程序的配置。

npx create-react-app my-app
cd my-app
npm start

以上代码创建了一个名为 "my-app" 的 React 应用程序，并在本地运行它。如果一切顺利，您可以通过访问 http://localhost:3000 来看到该应用程序。

React 组件

React 组件是构建您应用程序 UI 的基本构建块。组件可以包含自己的状态、属性和方法，并可以相互嵌套以构建更复杂的组件。以下是一个简单的组件示例：

// javascriptcn.com 代码示例
import React from 'react';

class Hello extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

export default Hello;

上面的组件接受一个名为 "name" 的属性，然后在组件中使用这个属性来生成渲染的消息。您可以像下面这样使用组件：

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './Hello';

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('root')
);

以上代码将 Hello 组件渲染到一个名为 "root" 的元素中，并将 "World" 作为属性传递给它。

React 生命周期

React 组件具有多个生命周期方法，这些方法在组件渲染、更新和卸载期间被调用。以下是常用的一些生命周期方法：

constructor: 用于初始化组件的状态和属性。
render: 渲染组件并返回 UI。
componentDidMount: 组件已经被渲染到 DOM 中，可以进行后续的操作。
componentDidUpdate: 组件已经被更新，并重新渲染到 DOM 中。
componentWillUnmount: 组件将要被卸载并从 DOM 中删除。

React Hooks

React Hooks 是一种新的 API，它让函数组件可以使用 React 中的状态和生命周期方法。其中一些常见的 Hooks 包括：

useState: 用于定义和更新组件的状态。
useEffect: 用于处理组件的生命周期方法。
useContext: 用于访问 React 上下文。
useMemo: 用于缓存和重用计算结果。

以下是一个使用 useState 和 useEffect 的示例：

// javascriptcn.com 代码示例
import React, { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  });

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

以上代码使用 useState 定义了一个名为 "count" 的状态，然后使用 useEffect 监听该状态的更改并更改页面标题。

整合 Fastiry 和 React

现在，我们已经了解了 Fastify 和 React 的基础知识，我们可以深入探讨如何将它们整合到一个完整的 web 应用程序中。在我们的示例应用程序中，Fastify 将作为后端框架，提供 API，而 React 将作为前端框架，负责渲染 UI。

创建 API

我们将首先创建一个 Fastify API，该 API 将在根路由上返回一个要与 UI 交互的 JSON 数据。您可以使用以下代码创建 Fastify 服务器：

// javascriptcn.com 代码示例
const fastify = require('fastify')();

fastify.get('/', async (request, reply) => {
  return { items: ['item1', 'item2', 'item3'] };
});

fastify.listen(3000, (err) => {
  if (err) {
    console.error(err);
    process.exit(1);
  }
  console.log('Server running on port 3000');
});

以上代码创建了一个返回包含三个项的数据的 JSON 对象的路由。

创建 React 应用程序

接下来，我们将创建 React 应用程序，它将从我们的 Fastify API 中检索数据，并将数据呈现为 UI 元素。

首先，我们将创建一个新的 React 组件，该组件将获取数据并将其存储在组件的状态中。您可以使用以下代码创建此组件：

// javascriptcn.com 代码示例
import React, { useState, useEffect } from 'react';

function App() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('http://localhost:3000/');
      const result = await response.json();
      setItems(result.items);
    };

    fetchData();
  }, []);

  return (
    <div>
      <h1>Items</h1>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

以上代码使用 useState 和 useEffect 连接到 Fastify API 并获取数据，然后将数据分配给名为 "items" 的状态。然后它呈现一个标题和一个项目列表，该列表使用 map 函数从项中创建列表项。React 中的 "key" 属性用于跟踪列表项，并提高应用程序的性能。

在应用程序的主入口点，我们将使用 ReactDOM.render 渲染 App 组件，如下所示：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

以上代码将 App 组件渲染到一个名为 "root" 的元素中。

构建和启动完整的应用程序

现在，我们已经创建了 Fastify API 和 React 应用程序，我们只需要将它们组合在一起以构建完整的应用程序。

首先，我们将构建 React 应用程序，并将其生成的文件复制到 Fastify 服务器的 public 目录中：

npm run build
cp -r build/* public/

然后，我们将在 Fastify 服务器的根目录中创建一个新的 handlebars 模板文件（index.hbs），用于呈现 React 应用程序的 HTML。此文件的内容如下：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Fastify and React</title>
</head>
<body>
  <div id="root"></div>
  <script src="bundle.js"></script>
</body>
</html>

最后，我们将更新 Fastify 服务器以使用 handlebars 模板文件，如下所示：

// javascriptcn.com 代码示例
const fastify = require('fastify')();
const path = require('path');
const fs = require('fs');
const handlebars = require('handlebars');

fastify.get('/', async (request, reply) => {
  const content = await fs.promises.readFile(
    path.join(__dirname, 'public', 'index.html'),
    'utf8'
  );
  const template = handlebars.compile(content);
  const html = template();
  reply.type('text/html').send(html);
});

fastify.listen(3000, (err) => {
  if (err) {
    console.error(err);
    process.exit(1);
  }
  console.log('Server running on port 3000');
});

以上代码读取 handlebars 模板文件，然后使用 handlebars 编译器将其呈现为 HTML。Fastify 服务器在根路由上响应此 HTML，同时使用 React 渲染列表项数据。

现在，您可以使用以下命令启动 Fastify 服务器：

npm start

如果一切顺利，您可以通过访问 http://localhost:3000 来查看完整的应用程序。

总结

在本文中，我们深入探讨了 Fastify 和 React，以及如何使用它们共同构建完整的堆栈实践。我们了解了 Fastify 的高性能和易于使用，以及 React 的生命周期、组件和 Hooks。最后，我们将这两个工具整合到一起，构建了一个 React 应用程序，该程序从 Fastify API 检索数据并将其呈现为 UI 元素。这些技术的组合提供了一种简单而强大的方式来构建现代 web 应用程序。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6532293b7d4982a6eb46f369