跳至頁尾內容
  1. IronPDF for Node.js
  2. IronPDF for Node.js部落格
  3. Node幫助
  4. recoil NPM
NODE 說明

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

Darrius Serrant
Darrius Serrant
已更新:

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

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

什麼是Recoil Package？

Recoil是一個用於React的狀態管理程式庫，旨在解決現有解決方案如Redux和Context API的限制。 它提供了一種更簡單且性能更好的方式來管理React應用中的共享狀態，提供如細粒度更新、異步狀態管理以及與React並發模式的輕松整合。

核心概念

Recoil引入了幾個關鍵概念，這使其與其他狀態管理程式庫有所不同：

  1. Atoms： Atoms是Recoil中狀態的基本單元。 它們代表可以在組件間共享的狀態片段。 當atom的值更改時，任何訂閱該atom的組件都會自動重新渲染。
  2. Selectors： Selectors是純函式，可從一個或多個原子或其他選擇器導出狀態。 它們可以是同步的或異步的，允許複雜的狀態導出和資料獲取邏輯。
  3. RecoilRoot： 這個元件用來為組件樹提供Recoil上下文。 它類似於React的Context Provider，必須包裹使用Recoil狀態的應用部分。

Recoil的優勢

Recoil相較於其他狀態管理解決方案提供幾個優勢：

  • 細粒度更新： 不像Redux中任何狀態更改會觸發多個組件的重新渲染，Recoil確保只有訂閱更改狀態的組件被重新渲染，從而提高性能。
  • 並發模式相容性： Recoil設計為與React的並發模式無縫合作，從而通過功能像時間分片和暫停提供更流暢的使用者體驗。
  • 簡化的異步狀態： 在Recoil中處理異步狀態，如資料獲取，由於內建對異步選擇器的支持變得更簡單。
  • 可擴展性： 由於其模組化的狀態管理方法，Recoil很好地擴展到大型應用程式中。
  • 社區努力： 遵從MIT許可，Recoil可以自由使用、修改和分發。 這鼓勵了開發者之間的廣泛採用和協作，允許任何人自由地基於它進行構建，貢獻bug修復和共享修改以改進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，適合多種開發環境。

簡單整合

using 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生成PDFs

安裝依賴： 首先，建立一個新的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僅在伺服器端運行，我們需要在使用者希望生成PDF時建立一個可調用的API。 在路徑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應用的有力選擇。

通過利用atoms和selectors，Recoil使得管理全域狀態變得模組化並直觀，提升整體的開發體驗。 IronPDF Node.js Library npm是具備PDF生成和讀取功能的企業套件。 開發者可以使用IronPDF程式庫輕鬆地將這些功能整合到他們的應用中。

Darrius Serrant
Darrius Serrant
  立即與工程團隊聊天
全端軟體工程師（WebOps）

Darrius Serrant擁有邁阿密大學的電腦科學學士學位，並在Iron Software擔任全端WebOps行銷工程師。從小就對程式設計有興趣，他認為計算既神秘又易於理解，成為創意和問題解決的完美媒介。

在Iron Software，Darrius喜歡創造新事物並簡化複雜的概念，使其更易於理解。作為我們的常駐開發人員之一，他還志願教學，將他的專業知識傳授給下一代。

對Darrius來說，他的工作是有意義的，因為它有價值且對社會有真正的影響。

相關文章

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

Iron 支援團隊

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