跳過到頁腳內容
  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套件？

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

核心概念

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

  1. Atoms： Atoms是Recoil中狀態的基本單元。 它們代表了可以在組件間共享的狀態片段。 當Atoms的值發生變化時，任何訂閱該Atoms的組件會自動重新渲染。
  2. Selectors：選擇器是從一個或多個Atoms或其他選擇器導出狀態的純函數。 它們可以是同步或非同步的，允許進行複雜的狀態導出和數據獲取邏輯。
  3. RecoilRoot：此組件用於提供Recoil上下文給組件樹。 它類似於React的Context提供者，必須包裹使用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
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

代碼解釋

  1. 使用const textState = atom()從Recoil創建一個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程式庫 npm是一個企業級套件，具備PDF生成和閱讀功能。 開發人員可以輕鬆使用IronPDF程式庫將這些功能集成到其應用程式中。

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

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

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

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

相關文章

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

Iron Support Team

We're online 24 hours, 5 days a week.
Chat
Email
Call Me