節點幫助

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

發佈 2024年8月13日

介紹

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

這篇文章探討了 Recoil 的核心概念、其優點以及如何在 React 專案中開始使用它。此外，我們還會查看 IronPDF PDF 生成庫，用於從網頁 URL 或 HTML 生成 PDF。

Recoil 套件是什麼？

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

核心概念

Recoil 介紹了一些與其他狀態管理庫不同的關鍵概念：

Atoms（原子）：Atoms 是 Recoil 中狀態的基本單位，代表可以在組件間共享的狀態片段。當某個 atom 的值改變時，任何訂閱了該 atom 的組件都會自動重新渲染。
Selectors（選擇器）：Selectors 是派生狀態的純函數，它們可以從一個或多個 atoms 或其他 selectors 中派生狀態。它們可以是同步或異步的，允許進行複雜的狀態派生和數據抓取邏輯。
RecoilRoot：此組件用於向組件樹提供 Recoil 上下文。它類似於 React 的 Context Provider，必須包裹住使用 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

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

直接從URL生成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 項目 (如果您還沒有)參考這裡如需設置此項的教學，請參閱教程，或使用以下命令：

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 需要許可證金鑰，從這裡獲取這裡並將其放置在上述代碼中

添加以下代碼以從用戶接受一個 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';
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' 創建一個 atom 狀態()從 Recoil 獲取，用來存儲使用者在輸入欄中輸入的 URL。
添加標題、輸入框和按鈕元件
使用 yarn dev 執行應用程式，然後輸入想要生成 PDF 的網站 URL
當點擊「Generate PDF」按鈕時，請求的 PDF 就會生成。如下面所示：

輸出

網站的外觀：

recoil NPM（它是如何為開發人員工作的）：圖2 - 用於生成PDF的網站

當提供 URL 'https://ironpdf.com/nodejs/' 時生成的 PDF：

recoil NPM（開發人員如何使用）：圖3 - 使用IronPDF生成的PDF輸出

IronPDF License

recoil NPM（對開發者來說如何運作）: 圖 4 - 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 應用程式的有力選擇。

通過使用 atoms 和 selectors，Recoil 使得管理全局狀態變得模組化且直觀，增強了整體開發體驗。 IronPDF npm 是一個具有 PDF 生成和閱讀功能的企業套件。開發者可以使用 IronPDF 庫輕鬆地將這些功能整合到他們的應用程式中。

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

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

使用 npm 安裝

版本： 2024.9

報告問題

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

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

查看許可證 >

範例

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

介紹

Recoil 套件是什麼？

核心概念

Recoil 的優勢

開始使用 Recoil

npm 安裝 Recoil

設定 RecoilRoot

IronPDF 簡介

主要功能

HTML 轉 PDF 轉換

URL轉換為PDF

PDF 操作

PDF 安全性

高品質輸出

跨平台相容性

簡單整合

安裝

使用 IronPDF 和 Recoil 生成 PDF

代碼說明

輸出

IronPDF License

結論

本頁內容

報告問題

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

在實際環境中測試

全功能產品

24/5技術支援

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

試用表格已提交
成功地.

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

在實際環境中測試

全功能產品

24/5技術支援

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

試用表格已提交
成功地.

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

IronPDF 是 IRON 的一部分套件

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

介紹

Recoil 套件是什麼？

核心概念

Recoil 的優勢

開始使用 Recoil

npm 安裝 Recoil

設定 RecoilRoot

IronPDF 簡介

主要功能

HTML 轉 PDF 轉換

URL轉換為PDF

PDF 操作

PDF 安全性

高品質輸出

跨平台相容性

簡單整合

安裝

使用 IronPDF 和 Recoil 生成 PDF

代碼說明

輸出

IronPDF License

結論

本頁內容

報告問題

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

免費獲取

試用表格已提交成功地.

試用表格已提交成功地.

試用表格已提交成功地.

試用表格已提交成功地.

在實際環境中測試

全功能產品

24/5技術支援

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

試用表格已提交成功地.

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

在實際環境中測試

全功能產品

24/5技術支援

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

試用表格已提交成功地.

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

IronPDF 是 IRON 的一部分套件

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

試用表格已提交
成功地.

試用表格已提交
成功地.

試用表格已提交
成功地.

試用表格已提交
成功地.

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

試用表格已提交
成功地.

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

試用表格已提交
成功地.