节点帮助

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

发布 2024年八月13日

介绍

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

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

什么是 Recoil 软件包？

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

核心概念

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

原子：原子是 Recoil 中的基本状态单位。它们代表的是可以跨组件共享的状态片段。当原子的值发生变化时，任何订阅该原子的组件都会自动重新渲染。
选择器：选择器是从一个或多个原子或其他选择器派生状态的纯函数。这些工具可以是同步的，也可以是异步的，允许复杂的状态推导和数据获取逻辑。
RecoilRoot：该组件用于为组件树提供 Recoil 上下文。它类似于 React 的 Context Provider，必须封装应用程序中使用 Recoil 状态的部分。

Recoil 的优点

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

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

开始使用 Recoil

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

npm 安装 Recoil

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

npm install recoil

npm install recoil

IRON VB CONVERTER ERROR developers@ironsoftware.com

VB C#

设置 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>
);

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>
);

IRON VB CONVERTER ERROR developers@ironsoftware.com

VB C#

定义原子和选择器:

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;
  },
});

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;
  },
});

IRON VB CONVERTER ERROR developers@ironsoftware.com

VB C#

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

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;

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;

IRON VB CONVERTER ERROR developers@ironsoftware.com

VB C#

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

IRON VB CONVERTER ERROR developers@ironsoftware.com

VB C#

使用 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"

IRON VB CONVERTER ERROR developers@ironsoftware.com

VB C#

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

cd recoil-pdf

cd recoil-pdf

IRON VB CONVERTER ERROR developers@ironsoftware.com

VB C#

安装所需的软件包：

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

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

IRON VB CONVERTER ERROR developers@ironsoftware.com

VB C#

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

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

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

IRON VB CONVERTER ERROR developers@ironsoftware.com

VB C#

PDF 生成 API：第一步是创建生成 PDF 文档的后台 API。由于 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();
    }
}

// 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();
    }
}

IRON VB CONVERTER ERROR developers@ironsoftware.com

VB C#

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

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

IRON VB CONVERTER ERROR developers@ironsoftware.com

VB C#

代码解释

使用 'const textState = atom' 创建原子状态()译文中的 "URL "一词来自 Recoil，将用于存储用户在输入框中输入的 URL。
添加标题、输入和按钮组件。
使用 "yarn dev "运行应用程序，然后输入您希望生成 PDF 的网站 URL。
点击 "生成 PDF "按钮后，所需的 PDF 将生成。如下所示：

输出

网站的外观：

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

给出 URL 'https://ironpdf.com/nodejs/' 时生成的 PDF：

recoil NPM（它如何为开发人员工作）：图3 - 使用IronPDF生成的输出PDF

IronPDF 许可证

recoil NPM（如何为开发人员工作）：图4 - IronPDF 许可页面

"(《世界人权宣言》)IronPDF 试用许可允许用户在购买前查看其丰富的功能。有关永久许可的更多详细信息，请访问IronPDF 许可信息page.

在此处放置许可证密钥：

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

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

IRON VB CONVERTER ERROR developers@ironsoftware.com

VB C#

结论

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

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

< 前一页
uuid NPM（开发人员如何工作）

下一步 >
recharts NPM（开发者使用指南）

使用 npm 安装

版本：2024.11

报告问题

加入我们的Iron Swag漏洞赏金计划

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

查看许可证 >

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

介绍

什么是 Recoil 软件包？

核心概念

Recoil 的优点

开始使用 Recoil

npm 安装 Recoil

设置 RecoilRoot

IronPDF 简介

主要功能

HTML 转换为 PDF

URL 转换为 PDF

PDF 操作

PDF 安全

高质量输出

跨平台兼容性

简单集成

安装

使用 IronPDF 和 Recoil 生成 PDF 文件

代码解释

输出

IronPDF 许可证

结论

在此页面上

报告问题

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

在实际环境中测试

全面功能产品

24/5 技术支持

获取您的免费 0天试用密钥立即。

试用表格已提交
成功地.

受到全球数百万工程师的信任

IronPDF 是 IRON 的一部分套装

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

介绍

什么是 Recoil 软件包？

核心概念

Recoil 的优点

开始使用 Recoil

npm 安装 Recoil

设置 RecoilRoot

IronPDF 简介

主要功能

HTML 转换为 PDF

URL 转换为 PDF

PDF 操作

PDF 安全

高质量输出

跨平台兼容性

简单集成

安装

使用 IronPDF 和 Recoil 生成 PDF 文件

代码解释

输出

IronPDF 许可证

结论

在此页面上

报告问题

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

试用表格已提交成功地.

在实际环境中测试

全面功能产品

24/5 技术支持

获取您的免费 0天试用密钥 立即。

试用表格已提交成功地.

受到全球数百万工程师的信任

IronPDF 是 IRON 的一部分套装

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

试用表格已提交
成功地.

获取您的免费 0天试用密钥立即。

试用表格已提交
成功地.