NODE 說明

recoil NPM（開發者的使用方法）

Name: IronPDF
Brand: Iron Software
Availability: InStock
Rating: 4.87 (307 reviews)

更新日期:6月 22, 2025

狀態管理是構建健壯且可擴展的 React 應用程式的關鍵。在各種狀態管理庫中，Recoil 成為了一個強大且靈活的選擇。由 Facebook 開發的 Recoil 作為一種實驗性狀態管理框架，簡化了複雜的狀態管理場景，並提供更直觀的 API 來管理 React 應用程式中的全局狀態。

本文探討了 Recoil 的核心概念，其優勢，以及如何在 React 項目中開始使用它。同時，我們將研究 IronPDF Node.js PDF 生成工具 庫，從網站 URL 或 HTML 生成 PDF。

什麼是 Recoil 套件？

Recoil 是一個 React 的狀態管理庫，旨在解決現有解決方案如 Redux 和 Context API 的限制。它提供了一種更簡單且更高效的方法來管理 React 應用程式中的共享狀態，提供如細粒度更新、異步狀態管理和與 React 並發模式的輕鬆集成等功能。

核心概念

Recoil 引入了幾個將其與其他狀態管理庫區分開來的關鍵概念：

Atoms：Atoms 是 Recoil 中的基本狀態單元。它們表示可以在組件間共享的狀態部分。當 atoms 的值改變時，訂閱該 atom 的任何組件會自動重新渲染。
Selectors：Selectors 是純函數，從一或多個 atoms 或其他 selectors 推導狀態。它們可以是同步或異步的，允許進行複雜的狀態推導和數據獲取邏輯。
RecoilRoot：此組件用於向組件樹提供 Recoil 上下文。它類似於 React 的上下文提供者，必須包裹使用 Recoil 狀態的應用程式部分。

Recoil 的優勢

Recoil 比其他狀態管理解決方案具有多個優勢：

精細的更新：與 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>
);

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

JAVASCRIPT

定義 Atoms 和 Selectors

import { atom, selector } from 'recoil';

// Atom to hold the text state
export const textState = atom({
  key: 'textState',
  default: '',
});

// Selector to derive the character count from the textState atom
export const charCountState = selector({
  key: 'charCountState',
  get: ({ get }) => {
    const text = get(textState);
    return text.length;
  },
});

import { atom, selector } from 'recoil';

// Atom to hold the text state
export const textState = atom({
  key: 'textState',
  default: '',
});

// Selector to derive the character count from the textState atom
export const charCountState = selector({
  key: 'charCountState',
  get: ({ get }) => {
    const text = get(textState);
    return text.length;
  },
});

JAVASCRIPT

在組件中使用 Atoms 和 Selectors

import React from 'react';
import { useRecoilState, useRecoilValue } from 'recoil';
import { textState, charCountState } from './state';

function CharacterCounter() {
  // Use Recoil hooks to manage atom and selector state
  const [text, setText] = useRecoilState(textState);
  const count = useRecoilValue(charCountState);

  // Handle text change
  const onChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <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() {
  // Use Recoil hooks to manage atom and selector state
  const [text, setText] = useRecoilState(textState);
  const count = useRecoilValue(charCountState);

  // Handle text change
  const onChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <p>Character Count: {count}</p>
    </div>
  );
}

export default CharacterCounter;

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，使其適合多種開發環境。

簡單集成

輕鬆將 IronPDF 集成到您的 Node.js 應用程序中，使用其 npm 包。 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>
  );
}

import React from 'react';
import { RecoilRoot } from 'recoil';

export default function App({ Component, pageProps }) {
  return (
    <RecoilRoot>
      <Component {...pageProps} />
    </RecoilRoot>
  );
}

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

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

// Atom to store user input URL
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);

  // Function to generate PDF from URL
  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);
    }
  };

  // Handle input change
  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>
        <input type="text" value={text} onChange={handleChange} placeholder="Enter URL" />
        <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';

// Atom to store user input URL
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);

  // Function to generate PDF from URL
  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);
    }
  };

  // Handle input change
  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>
        <input type="text" value={text} onChange={handleChange} placeholder="Enter URL" />
        <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>
  );
}

JAVASCRIPT

代碼解釋

使用 const textState = atom() 從 Recoil 創建一個 atom 狀態，這將用於存儲用戶在輸入字段中輸入的 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 許可證資訊 頁面找到。

在這裡放置許可證密鑰：

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

JAVASCRIPT