1. IronPDF for Node.js
  2. IronPDF for Node.js博客
  3. 节点帮助
  4. recoil NPM
节点帮助

NPM 反冲（开发人员的工作原理）

Darrius Serrant
Darrius Serrant
2024年八月13日
分享:

介绍

状态管理是构建稳健且可扩展的 React 应用程序的一个关键方面。 在各种状态管理库中，Recoil 已成为一种强大而灵活的选择。 Recoil 由 Facebook 开发，是一个实验性的状态管理框架，它简化了复杂的状态管理场景，并为 React 应用程序中的全局状态管理提供了更直观的 API。

本文将探讨 Recoil 的核心概念、优势以及如何在 React 项目中开始使用它。 此外，我们将研究 IronPDF Node.js PDF生成工具 库，以从网站URL或HTML生成PDF。

什么是 Recoil 软件包？

Recoil 是 React 的状态管理库，旨在解决 Redux 和 Context API 等现有解决方案的局限性。 它为 React 应用程序中的共享状态管理提供了一种更直接、更高效的方法，具有细粒度更新、异步状态管理以及与 React 并发模式轻松集成等功能。

核心概念

Recoil 介绍了有别于其他状态管理库的几个关键概念：

  1. 原子：在Recoil中，原子是状态的基本单元。 它们代表的是可以跨组件共享的状态片段。 当原子的值发生变化时，任何订阅该原子的组件都会自动重新渲染。

  2. 选择器：选择器是纯函数，可以从一个或多个原子或其他选择器中派生状态。 这些工具可以是同步的，也可以是异步的，允许复杂的状态推导和数据获取逻辑。

  3. RecoilRoot：此组件用于为组件树提供Recoil上下文。 它类似于 React 的 Context Provider，必须封装应用程序中使用 Recoil 状态的部分。

Recoil 的优点

与其他状态管理解决方案相比，Recoil 具有多项优势：

  • 细粒度更新：与 Redux 不同，Redux 中的任何状态变化都可能触发多个组件的重新渲染，而 Recoil 确保只有订阅了已更改状态的组件会重新渲染，从而带来更好的性能。
  • 并发模式兼容性：Recoil 旨在与 React 的并发模式无缝协作，支持时间切片和悬挂等功能，为用户提供更流畅的体验。
  • 简单的异步状态：由于 Recoil 内置了对异步选择器的支持，处理异步状态（如数据获取）变得更加简单。
  • 可扩展性：由于其模块化的状态管理方法，Recoil在大型应用程序中的扩展性良好。
  • 社区努力： 在MIT许可证下，Recoil可自由使用、修改和分发。 这样可以鼓励开发人员广泛采用和协作，让任何人都能自由地在此基础上进行开发、贡献错误修复和共享修改，从而改进 Recoil。 Recoil 的开发工作在其开源的 GitHub 存储库中进行。

开始使用 Recoil

要开始在 React 应用程序中使用 Recoil，请按照以下步骤操作：

npm 安装 Recoil

要安装最新的稳定版本，请运行以下命令，因为 Recoil 软件包位于 npm 中：

npm install recoil
npm install recoil
SHELL

设置 RecoilRoot

使用 RecoilRoot 组件包装您的应用程序。

import React from 'react';
import ReactDOM from 'react-dom/client';
import { RecoilRoot } from 'recoil';
import App from './App';
const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);
root.render(
  <RecoilRoot>
    <App />
  </RecoilRoot>
);
js
JAVASCRIPT

定义原子和选择器：

import { atom, selector } from 'recoil';
export const textState = atom({
  key: 'textState',
  default: '',
});
export const charCountState = selector({
  key: 'charCountState',
  get: ({ get }) => {
    const text = get(textState);
    return text.length;
  },
});
js
JAVASCRIPT

在组件中使用原子和选择器：

import React from 'react';
import { useRecoilState, useRecoilValue } from 'recoil';
import { textState, charCountState } from './state';
function CharacterCounter() {
  const [text, setText] = useRecoilState(textState);
  const count = useRecoilValue(charCountState);
  const onChange = (event) => {
    setText(event.target.value);
  };
  return (
    <div>
      <p>Character Count: {count}</p>
    </div>
  );
}
export default CharacterCounter;
js
JAVASCRIPT

IronPDF 简介

recoil NPM（开发人员如何使用）：图1 - IronPDF网页

IronPDF 是一个流行的PDF生成库，用于生成、编辑和转换PDF文档。 IronPDF npm 软件包专为 Node.js 应用程序设计。 以下是 IronPDF npm 软件包的一些主要功能和详细信息：

主要功能

HTML 转换为 PDF

将 HTML 内容轻松转换为 PDF 文档。 此功能特别适用于从网页内容生成动态PDF。

URL 转换为 PDF

直接从 URL 生成 PDF，允许您捕获网页内容并以编程方式将其保存为 PDF 文件。

PDF 操作

轻松合并、拆分和操作现有的PDF文档。 IronPdf 提供附加页面、分割文档等功能。

PDF 安全

通过设置密码或应用数字签名来保护您的PDF文档。 IronPDF 提供选项以保护您的敏感文档免受未经授权的访问。

高质量输出

生成高质量的PDF文档，精确渲染文本、图像和格式。 IronPDF 确保您生成的 PDF 保持与原始内容的一致性。

跨平台兼容性

IronPDF兼容多个平台，包括Windows、Linux和macOS，使其适用于广泛的开发环境。

简单集成

使用其npm软件包轻松将IronPDF集成到您的Node.js应用程序中。 API 文档详实，使将 PDF 生成功能集成到您的项目中变得简单明了。

安装

要安装 IronPDF NPM 软件包，请使用以下命令：

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
SHELL

使用 IronPDF 和 Recoil 生成 PDF 文件

安装依赖项：首先，创建一个新的 Next.js 项目（如果您还没有）。 参考此Next.js 设置教程以获取详细说明，或使用以下命令：

npx create-next-app@latest recoil-pdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"
npx create-next-app@latest recoil-pdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"
SHELL

接下来，导航到你的项目目录：

cd recoil-pdf
cd recoil-pdf
SHELL

安装所需的软件包：

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add recoil
yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add recoil
SHELL

添加 "app.js "文件以包含 Recoil，如下所示：

import React from 'react';
import { RecoilRoot } from 'recoil';
export default function App({ Component, pageProps }) {
  return (
    <RecoilRoot>
      <Component {...pageProps} />
    </RecoilRoot>
  );
}
js
JAVASCRIPT

PDF生成API：第一步是创建一个后端API来生成PDF文档。 由于 IronPdf 只在服务器端运行，我们需要创建一个 API，以便在用户想要生成 PDF 时调用。 在 pages/api/pdf.js 路径下创建一个文件，并添加以下代码内容：

// pages/api/pdf.js
import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Your license key";
export default async function handler(req, res) {
    try {
        const url = req.query.url
        const pdf = await PdfDocument.fromUrl(url);
        const data = await pdf.saveAsBuffer();
        console.error('data PDF:', data);
        res.setHeader('Content-Type', 'application/pdf');
        res.setHeader('Content-Disposition', 'attachment; filename=awesomeIron.pdf');
        res.send(data);
    } catch (error) {
        console.error('Error generating PDF:', error);
        res.status(500).end();
    }
}
js
JAVASCRIPT

IronPDF 需要许可证密钥，请从IronPDF 试用许可证页面获取并将其放置在上述代码中。

添加以下代码，接受用户提供的 URL，根据 URL 生成 PDF，并将其保存到 index.js 文件中：

import Head from 'next/head';
import styles from '../styles/Home.module.css';
import React from 'react';
import {
  atom,
  useRecoilState,
} from 'recoil';
const textState = atom({
  key: 'textState', // unique ID (with respect to other atoms/selectors)
  default: '', // default value (aka initial value)
});
export default function Home() {
  const [text, setText] = useRecoilState(textState);
    const generatePdf = async () => {
        try {
            const response = await fetch('/api/pdf?url='+text);
            const blob = await response.blob();
            const url = window.URL.createObjectURL(new Blob([blob]));
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', 'awesomeIron.pdf');
            document.body.appendChild(link);
            link.click();
            link.parentNode.removeChild(link);
        } catch (error) {
            console.error('Error generating PDF:', error);
        }
    };
    const handleChange = (event) => {
      setText(event.target.value);
    }
    return (
        <div className={styles.container}>
            <Head>
                <title>Generate PDF Using IronPDF</title>
                <link rel="icon" href="/favicon.ico"/>
            </Head>
            <main>
                <h1>Demo Recoil NPM and Generate PDF Using IronPDF</h1>
                <p>
                    <span>Enter Url To Convert to PDF:</span>{" "}
                </p>
                <button style={{margin:20, padding:5}} onClick={generatePdf}>Generate PDF</button>
            </main>          
            <style jsx>{`
                main {
                    padding: 5rem 0;
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                }
                footer {
                    width: 100%;
                    height: 100px;
                    border-top: 1px solid #eaeaea;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                footer img {
                    margin-left: 0.5rem;
                }
                footer a {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    text-decoration: none;
                    color: inherit;
                }
                code {
                    background: #fafafa;
                    border-radius: 5px;
                    padding: 0.75rem;
                    font-size: 1.1rem;
                    font-family: Menlo,
                    Monaco,
                    Lucida Console,
                    Liberation Mono,
                    DejaVu Sans Mono,
                    Bitstream Vera Sans Mono,
                    Courier New,
                    monospace;
                }
            `}</style>
            <style jsx global>{`
                html,
                body {
                    padding: 0;
                    margin: 0;
                    font-family: -apple-system,
                    BlinkMacSystemFont,
                    Segoe UI,
                    Roboto,
                    Oxygen,
                    Ubuntu,
                    Cantarell,
                    Fira Sans,
                    Droid Sans,
                    Helvetica Neue,
                    sans-serif;
                }
                * {
                    box-sizing: border-box;
                }
            `}</style>
        </div>
    );
}
js
JAVASCRIPT

代码解释

  1. 使用 Recoil 的 'const textState = atom()' 创建一个 atom 状态，用于存储用户在输入字段中输入的 URL。

  2. 添加标题、输入和按钮组件。

  3. 使用 "yarn dev "运行应用程序，然后输入您希望生成 PDF 的网站 URL。

  4. 点击 "生成 PDF "按钮后，所需的 PDF 将生成。 如下所示：

输出

网站的外观：

recoil NPM（如何为开发人员工作）：图2 - 生成PDF的网站

提供URL https://ironpdf.com/nodejs/时生成的PDF：

recoil NPM（它对开发者的作用）：图 3 - 使用 IronPDF 生成的输出 PDF

IronPDF 许可证

recoil NPM（开发人员如何使用）：图4 - IronPDF 许可页面

IronPDF 试用许可证允许用户在购买前查看其广泛的功能。 有关永久许可的更多详细信息，请参阅IronPDF Licensing Information页面。

在此处放置许可证密钥：

import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";
js
JAVASCRIPT

结论

Recoil 为 React 应用程序中的状态管理提供了一种现代而高效的方法。 对于希望构建可扩展和高性能 React 应用程序的开发人员来说，React 是一个极具吸引力的选择。

通过利用原子和选择器，Recoil 允许以模块化和直观的方式管理全局状态，从而增强整体开发体验。 IronPDF Node.js 库 npm 是一个企业级包，具有 PDF 生成和阅读功能。 开发人员可以使用 IronPDF 库轻松地将这些功能集成到他们的应用程序中。

Darrius Serrant
Darrius Serrant
  立即与工程团队聊天
全栈软件工程师（WebOps）

达瑞乌斯·塞兰特拥有迈阿密大学计算机科学学士学位，目前在Iron Software担任全栈WebOps营销工程师。从小对编码的热爱使他认为计算机既神秘又易接近，成为创意和解决问题的完美媒介。

在Iron Software，达瑞乌斯乐于创造新事物并简化复杂概念，使其更易于理解。作为我们在职开发者之一，他还自愿教授学生，将他的专业知识传授给下一代。

对达瑞乌斯而言，他的工作之所以令人满足，是因为它具有价值并产生了真正的影响。

< 前一页
uuid NPM（开发人员如何工作）
下一步 >
recharts NPM（开发者使用指南）

使用 npm 安装

版本：2025.5

> npm i @ironsoftware/ironpdf

报告问题

准备开始了吗？ 版本： 2025.5 刚刚发布

免费开始
npm 下载 开始免费试用
查看许可证 >
Experience the full power of IronPDF 开始免费试用
Textlogo Iron Suite related to NPM 反冲（开发人员的工作原理）

IronPDF 是 IRON 的一部分套装

10 个 .NET API 产品用于您的办公文档

以2个产品的价格获取10个产品   开始免费试用