節點幫助

recoil NPM（開發人員如何使用）

發佈 2024年8月13日

介紹

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

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

什麼是 Recoil 套件？

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

核心概念

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

原子：在 Recoil 中，原子是狀態的基本單位。它們代表可以在元件之間共享的狀態片段。當一個 atom 的值發生變化時，任何訂閱該 atom 的組件都會自動重新渲染。
選擇器：選擇器是純函數，從一個或多個原子或其他選擇器中衍生狀態。它們可以是同步的或非同步的，允許進行複雜的狀態推導和數據獲取邏輯。
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

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#

在組件中使用 Atoms 和 Selectors:

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是一個流行的 PDF 生成庫，用於生成、編輯和轉換 PDF 文件。 IronPDF npm 套件專為 Node.js 應用程式設計。以下是關於IronPDF npm套件的一些主要功能和細節：

主要功能

HTML 轉 PDF

輕鬆將 HTML 內容轉換成 PDF 文件。此功能特別適合從網頁內容生成動態 PDF。

URL 轉換為 PDF

直接從網址生成PDF，讓您可以程式化地捕獲網頁內容並將其保存為PDF文件。

PDF 操作

輕鬆合併、拆分和操作現有的 PDF 文件。 IronPDF 提供如附加頁面、拆分文檔等功能。

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 專案(如果您還沒有). Refer to thisNext.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：第一步是創建一個後端 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();
        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 需要許可密鑰，可從IronPDF 試用許可證頁面並將其放置在上述代碼中。

將以下程式碼新增至 index.js 文件中，以接受使用者輸入的 URL，從該 URL 生成 PDF 並保存：

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 創建一個原子狀態()「從 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 試用許可證允許用戶在購買之前查看其廣泛的功能。有關永久授權的更多詳細資訊可以在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 應用程式時的一個有吸引力的選擇。

透過利用原子和選擇器，Recoil 提供了一種模組化且直觀的方式來管理全域狀態，提升整體開發體驗。 IronPDF Node.js 圖書館npm 是一個企業級套件，提供 PDF 生成和閱讀功能。開發人員可以使用IronPDF庫輕鬆地將這些功能整合到他們的應用程式中。

< 上一頁
uuid NPM (對開發者而言如何運作)

下一個 >
recharts NPM（開發人員如何使用）

使用 npm 安裝

版本：2024.11

報告問題

加入我們的漏洞獎勵計劃以獲得 Iron Swag

準備開始了嗎？版本: 2024.11 剛剛發布

查看許可證 >

recoil NPM（開發人員如何使用）

介紹

什麼是 Recoil 套件？

核心概念

Recoil 的優勢

Recoil 入門

npm 安裝 Recoil

設置 RecoilRoot

IronPDF 介紹

主要功能

HTML 轉 PDF

URL 轉換為 PDF

PDF 操作

PDF 安全性

高品質輸出

跨平台相容性

簡單整合

安裝

使用 IronPDF 和 Recoil 生成 PDF

程式碼說明

輸出

IronPDF 授權

結論

本頁內容

報告問題

準備開始了嗎？版本: 2024.11 剛剛發布

在實際環境中測試

全功能產品

24/5技術支援

獲取你的免費 0天試用序號立即。

試用表格已提交
成功地.

受到全球數百萬工程師的信任

IronPDF 是 IRON 的一部分套件

recoil NPM（開發人員如何使用）

介紹

什麼是 Recoil 套件？

核心概念

Recoil 的優勢

Recoil 入門

npm 安裝 Recoil

設置 RecoilRoot

IronPDF 介紹

主要功能

HTML 轉 PDF

URL 轉換為 PDF

PDF 操作

PDF 安全性

高品質輸出

跨平台相容性

簡單整合

安裝

使用 IronPDF 和 Recoil 生成 PDF

程式碼說明

輸出

IronPDF 授權

結論

本頁內容

報告問題

準備開始了嗎？ 版本: 2024.11 剛剛發布

試用表格已提交成功地.

在實際環境中測試

全功能產品

24/5技術支援

獲取你的免費 0天試用序號 立即。

試用表格已提交成功地.

受到全球數百萬工程師的信任

IronPDF 是 IRON 的一部分套件

準備開始了嗎？版本: 2024.11 剛剛發布

試用表格已提交
成功地.

獲取你的免費 0天試用序號立即。

試用表格已提交
成功地.