跳過到頁腳內容
  1. IronPDF for Node.js
  2. IronPDF for Node.js 博客
  3. Node 說明
  4. recoil NPM
NODE 說明

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

Darrius Serrant
Darrius Serrant
更新:

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

本文探討了 Recoil 的核心概念、優勢以及如何在 React 專案中開始使用它。 此外，我們還將研究IronPDF Node.js PDF 生成工具庫，以便從網站 URL 或 HTML 產生 PDF。

什麼是後座力組件？

Recoil 是一個用於 React 的狀態管理函式庫，旨在解決 Redux 和 Context API 等現有解決方案的限制。 它提供了一種更直接、更有效率的方法來管理 React 應用程式中的共享狀態，提供了細粒度更新、非同步狀態管理以及與 React 並發模式輕鬆整合等功能。

核心概念

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

1.原子：原子是反沖中的基本狀態單位。 它們代表可以在組件之間共享的狀態片段。 當原子的值改變時，任何訂閱該原子的元件都會自動重新渲染。 2.選擇器：選擇器是純函數，它從一個或多個原子或其他選擇器匯出狀態。 它們可以是同步的，也可以是非同步的，從而實現複雜的狀態推導和資料獲取邏輯。

  1. RecoilRoot：此元件用於向元件樹提供 Recoil 上下文。 它類似於 React 的 Context Provider，必須包裝應用程式中使用 Recoil 狀態的部分。

後座力的益處

與其他狀態管理解決方案相比，Recoil 具有以下幾個優勢：

-細粒度更新：與 Redux 不同，Redux 中任何狀態變更都可能觸發多個元件中的重新渲染，而 Recoil 確保只有訂閱了更改狀態的元件才會重新渲染，從而帶來更好的效能。 -並發模式相容性： Recoil 旨在與 React 的並發模式無縫協作，透過時間切片和懸念等功能實現更流暢的使用者體驗。 -輕鬆處理非同步狀態：由於 Recoil 內建了對非同步選擇器的支持，因此處理非同步狀態（例如資料擷取）更加簡單。 -可擴展性：由於其模組化的狀態管理方法，Recoil 可以很好地擴展到大型應用程式。 -社區努力： Recoil 採用 MIT 許可證，可自由使用、修改和分發。 這鼓勵開發者廣泛採用和協作，允許任何人自由地在此基礎上進行構建、貢獻錯誤修復和分享修改，以改進 Recoil。 Recoil 的這項開發工作是在其開源GitHub程式碼庫中進行的。

開始使用後座力

若要在 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

定義原子和選擇器

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

在組件中使用原子和選擇器

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的 npm 包，即可輕鬆整合到您的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>
  );
}
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

程式碼解釋

  1. 使用 Recoil 中的 const textState = 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許可資訊頁面。

請在此輸入許可證密鑰：

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

結論

Recoil 為 React 應用程式的狀態管理提供了一種現代化且高效的方法。 它細粒度的更新、與並發模式的兼容性以及對非同步狀態的易於處理，使其成為希望構建可擴展且高效能 React 應用的開發人員的理想選擇。

Recoil 利用原子和選擇器，提供了一種模組化和直觀的方式來管理全局狀態，從而增強了整體開發體驗。 IronPDF Node.js Library npm 是一個具有 PDF 產生和讀取功能的Enterprise軟體包。 開發者可以使用IronPDF庫輕鬆地將這些功能整合到他們的應用程式中。

Darrius Serrant
Darrius Serrant
  立即與工程團隊聊天
全棧軟件工程師 (WebOps)

Darrius Serrant 擁有邁阿密大學計算機科學學士學位，目前任職於 Iron Software 的全栈 WebOps 市場營銷工程師。從小就迷上編碼，他認為計算既神秘又可接近，是創意和解決問題的完美媒介。

在 Iron Software，Darrius 喜歡創造新事物，並簡化複雜概念以便於理解。作為我們的駐場開發者之一，他也自願教學生，分享他的專業知識給下一代。

對 Darrius 來說，工作令人滿意因為它被重視且有實際影響。

相關文章

30天試用→完整產品。無限制。無需信用卡。 開始免費試用

鋼鐵支援團隊

我們每週 5 天，每天 24 小時在線上。
聊天
電子郵件
打電話給我