节点帮助

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

发布 2024年八月13日

介绍

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

本文探讨了Recoil的核心概念、其优势以及如何在React项目中开始使用它。同时，我们将深入研究 IronPDF 从网站URL或HTML生成PDF的PDF生成库。

Recoil 包是什么？

Recoil 是一个用于 React 的状态管理库，旨在解决现有解决方案（如 Redux 和 Context API）的局限性。它提供了一种更简单且性能更好的方式来管理 React 应用程序中的共享状态，具有细粒度更新、异步状态管理以及与 React 并发模式轻松集成等功能。

核心概念

Recoil 引入了几个关键概念，使其与其他状态管理库区别开来：

Atoms：Atoms 是 Recoil 中的基本状态单元。它们代表可以在组件之间共享的状态片段。当 Atom 的值发生变化时，任何订阅该 Atom 的组件都会自动重新渲染。
Selectors：Selectors 是从一个或多个 Atoms 或其他 Selectors 派生状态的纯函数。它们可以是同步的或异步的，允许进行复杂的状态派生和数据获取逻辑。
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

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 \text{ IronPDF 是一个流行的 PDF 生成库，用于生成、编辑和转换 PDF 文档。IronPDF npm 包是专为 Node.js 应用程序设计的。以下是 IronPDF npm 包的一些主要功能和细节：}

主要功能

HTML 转为 PDF

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

URL 转换为 PDF

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

PDF 操作

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

PDF 安全

通过为 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项目 (如果你还没有)参考这里有关设置此项的教程，或使用以下命令：

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需要许可证密钥，请从这里将以下代码添加到上面的代码中

const IronPDF = require('iron-pdf');

async function urlToPdf(url) {
    const pdf = await IronPDF.HtmlToPdf.fromUrl(url);
    pdf.saveAs('output.pdf');
}

const url = prompt('Please enter a URL: ');
urlToPdf(url);

const IronPDF = require('iron-pdf');

async function urlToPdf(url) {
    const pdf = await IronPDF.HtmlToPdf.fromUrl(url);
    pdf.saveAs('output.pdf');
}

const url = prompt('Please enter a URL: ');
urlToPdf(url);

JAVASCRIPT

将以下代码添加以从用户处接受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' 创建一个 atom 状态()从 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 许可证允许用户在购买前查看其广泛的功能。有关永久许可的更多详细信息，请参见 许可证 页。

把许可证密钥放在这里：

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应用的有力选择。

通过利用atoms和selectors，Recoil以模块化和直观的方式管理全局状态，提升了整体开发体验。 IronPDF npm 是一个具有 PDF 生成和阅读功能的企业级软件包。开发人员可以使用 IronPDF 库轻松地将这些功能集成到他们的应用程序中。

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

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

使用 npm 安装

版本： 2024.9

报告问题

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

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

查看许可证 >

示例

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

介绍

Recoil 包是什么？

核心概念

Recoil的优势

入门 Recoil

npm 安装 Recoil

设置 RecoilRoot

IronPDF简介

主要功能

HTML 转为 PDF

URL 转换为 PDF

PDF 操作

PDF 安全

高质量输出

简单集成

安装

使用IronPDF和Recoil生成PDF

代码解释

输出

IronPDF 许可证

结论

在此页面上

报告问题

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

在实际环境中测试

全面功能产品

24/5 技术支持

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

试用表格已提交
成功地.

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

在实际环境中测试

全面功能产品

24/5 技术支持

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

试用表格已提交
成功地.

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

IronPDF 是 IRON 的一部分套装

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

介绍

Recoil 包是什么？

核心概念

Recoil的优势

入门 Recoil

npm 安装 Recoil

设置 RecoilRoot

IronPDF简介

主要功能

HTML 转为 PDF

URL 转换为 PDF

PDF 操作

PDF 安全

高质量输出

简单集成

安装

使用IronPDF和Recoil生成PDF

代码解释

输出

IronPDF 许可证

结论

在此页面上

报告问题

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

获取您的免费

试用表格已提交成功地.

试用表格已提交成功地.

试用表格已提交成功地.

试用表格已提交成功地.

在实际环境中测试

全面功能产品

24/5 技术支持

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

试用表格已提交成功地.

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

在实际环境中测试

全面功能产品

24/5 技术支持

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

试用表格已提交成功地.

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

IronPDF 是 IRON 的一部分套装

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

试用表格已提交
成功地.

试用表格已提交
成功地.

试用表格已提交
成功地.

试用表格已提交
成功地.

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

试用表格已提交
成功地.

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

试用表格已提交
成功地.