POMOC NODE

recoil NPM (jak to działa dla programistów)

Name: IronPDF
Brand: Iron Software
Availability: InStock
Rating: 4.87 (307 reviews)

Zaktualizowano:18 stycznia, 2026

Zarządzanie stanem jest kluczowym aspektem tworzenia solidnych i skalowalnych aplikacji React. Spośród różnych bibliotek do zarządzania stanami Recoil stał się potężną i elastyczną opcją. Opracowany przez Facebooka jako eksperymentalny framework do zarządzania stanem, Recoil upraszcza złożone scenariusze zarządzania stanem i zapewnia bardziej intuicyjny interfejs API do zarządzania stanami globalnymi w aplikacjach React.

W tym artykule omówiono podstawowe koncepcje Recoil, jego zalety oraz sposób rozpoczęcia pracy z nim w projekcie React. Ponadto przyjrzymy się bibliotece IronPDF Node.js PDF Generation Tools, służącej do generowania plików PDF na podstawie adresów URL stron internetowych lub kodu HTML.

Czym jest pakiet Recoil?

Recoil to biblioteka do zarządzania stanem dla Reacta, której celem jest wyeliminowanie ograniczeń istniejących rozwiązań, takich jak Redux i Context API. Zapewnia to prostszy i wydajniejszy sposób zarządzania stanem współdzielonym w aplikacjach React, oferując takie funkcje, jak precyzyjne aktualizacje, asynchroniczne zarządzanie stanem oraz łatwą integrację z trybem współbieżnym React.

Podstawowe pojęcia

Recoil wprowadza kilka kluczowych koncepcji, które odróżniają go od innych bibliotek do zarządzania stanem:

Atomy: Atomy są podstawowymi jednostkami stanu w Recoil. Reprezentują one fragmenty stanu, które mogą być współdzielone między komponentami. Gdy wartość atomu ulegnie zmianie, każdy komponent subskrybujący ten atom zostanie automatycznie ponownie wyrenderowany.
Selektory: Selektory to funkcje czyste, które wywodzą stan z jednego lub więcej atomów lub innych selektorów. Mogą one działać synchronicznie lub asynchronicznie, co pozwala na złożone wyprowadzanie stanów i logikę pobierania danych.
RecoilRoot: Ten komponent służy do dostarczania kontekstu Recoil do drzewa komponentów. Działa podobnie do Context Provider w React i musi obejmować tę część aplikacji, która korzysta ze stanu Recoil.

Zalety Recoil

Recoil oferuje kilka zalet w porównaniu z innymi rozwiązaniami do zarządzania stanami:

Precyzyjne aktualizacje: W przeciwieństwie do Redux, gdzie każda zmiana stanu może wywołać ponowne renderowanie w wielu komponentach, Recoil zapewnia, że tylko komponenty subskrybujące zmieniony stan są ponownie renderowane, co prowadzi do lepszej wydajności.
Kompatybilność z trybem współbieżnym: Recoil został zaprojektowany tak, aby płynnie współpracować z trybem współbieżnym Reacta, umożliwiając płynniejsze doświadczenia użytkownika dzięki funkcjom takim jak time slicing i suspense.
Łatwy stan asynchroniczny: Obsługa stanu asynchronicznego, takiego jak pobieranie danych, jest w Recoil prostsza dzięki wbudowanej obsłudze selektorów asynchronicznych.
Skalowalność: Recoil dobrze skaluje się w przypadku dużych aplikacji dzięki modułowemu podejściu do zarządzania stanem.
Wysiłek społeczności: Na licencji MIT Recoil można swobodnie używać, modyfikować i rozpowszechniać. Zachęca to do powszechnego stosowania i współpracy wśród programistów, umożliwiając każdemu swobodne rozbudowywanie rozwiązania, zgłaszanie poprawek błędów i dzielenie się modyfikacjami w celu ulepszenia Recoil. Prace nad Recoil odbywają się w ich repozytorium open source na GitHubie.

Pierwsze kroki z Recoil

Aby rozpocząć korzystanie z Recoil w aplikacji React, wykonaj następujące kroki:

npm Install Recoil

Aby zainstalować najnowszą stabilną wersję, uruchom następujące polecenie, ponieważ pakiet Recoil znajduje się w npm:

npm install recoil

npm install recoil

SHELL

Konfiguracja RecoilRoot

Owiń swoją aplikację komponentem 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

Zdefiniuj atomy i selektory

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

Używanie atomów i selektorów w komponentach

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

Wprowadzenie do IronPDF

recoil NPM (Jak to działa dla programistów): Rysunek 1 – Strona internetowa IronPDF

IronPDF to popularna biblioteka do generowania plików PDF, służąca do tworzenia, edycji i konwersji dokumentów PDF. Pakiet IronPDF npm został zaprojektowany specjalnie dla aplikacji Node.js. Oto kilka kluczowych funkcji i szczegółów dotyczących pakietu IronPDF npm:

Najważniejsze cechy

Konwersja HTML do PDF

Z łatwością konwertuj treści HTML na dokumenty PDF. Ta funkcja jest szczególnie przydatna do generowania dynamicznych plików PDF na podstawie treści internetowych.

Konwersja adresów URL do formatu PDF

Generuj pliki PDF bezpośrednio z adresów URL, co pozwala na przechwytywanie treści stron internetowych i zapisywanie ich jako pliki PDF za pomocą kodu.

Manipulacja plikami PDF

Z łatwością scalaj, dziel i edytuj istniejące dokumenty PDF. IronPDF oferuje takie funkcje, jak dodawanie stron, dzielenie dokumentów i wiele innych.

Zabezpieczenia plików PDF

Zabezpiecz swoje dokumenty PDF, szyfrując je hasłami lub stosując podpisy cyfrowe. IronPDF oferuje opcje ochrony poufnych dokumentów przed nieuprawnionym dostępem.

Wysoka jakość tłumaczenia

Tworzenie wysokiej jakości dokumentów PDF z precyzyjnym renderowaniem tekstu, obrazów i formatowania. IronPDF gwarantuje, że wygenerowane pliki PDF zachowują wierność oryginalnej treści.

Kompatybilność międzyplatformowa

IronPDF jest kompatybilny z różnymi platformami, w tym Windows, Linux i macOS, dzięki czemu nadaje się do szerokiego zakresu środowisk programistycznych.

Prosta integracja

Z łatwością zintegruj IronPDF ze swoimi aplikacjami Node.js, korzystając z pakietu npm. API jest dobrze udokumentowane, co ułatwia włączenie funkcji generowania plików PDF do projektów.

Instalacja

Aby zainstalować pakiet IronPDF NPM, użyj następującego polecenia:

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64

SHELL

Generowanie plików PDF przy użyciu IronPDF i Recoil

Zainstaluj zależności: Najpierw utwórz nowy projekt Next.js (jeśli jeszcze tego nie zrobiłeś). Aby uzyskać szczegółowe instrukcje, zapoznaj się z tym samouczkiem dotyczącym konfiguracji Next.js lub użyj następującego polecenia:

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

Następnie przejdź do katalogu projektu:

cd recoil-pdf

cd recoil-pdf

SHELL

Zainstaluj wymagane pakiety:

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

Dodaj plik "app.js", aby dołączyć Recoil w sposób przedstawiony poniżej:

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

API do generowania plików PDF: Pierwszym krokiem jest stworzenie backendowego API do generowania dokumentów PDF. Ponieważ IronPDF działa wyłącznie po stronie serwera, musimy stworzyć API, które będzie wywoływane, gdy użytkownicy będą chcieli wygenerować plik PDF. Utwórz plik w ścieżce pages/api/pdf.js i dodaj poniższą treść kodu:

// 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 wymaga klucza licencyjnego. Można go pobrać ze strony IronPDF Licencja Trial i umieścić w powyższym kodzie.

Dodaj poniższy kod, aby zaakceptować adres URL od użytkownika, wygenerować plik PDF na podstawie tego adresu i zapisać go w pliku 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

Wyjaśnienie kodu

Utwórz stan atomowy przy użyciu const textState = atom() z Recoil, który będzie służył do przechowywania adresu URL wprowadzonego przez użytkownika w polu wprowadzania danych.
Dodaj komponenty nagłówka, pola wprowadzania danych i przycisku.
Uruchom aplikację za pomocą yarn dev, a następnie wprowadź adres URL strony internetowej, którą chcesz wygenerować jako plik PDF.
Po kliknięciu przycisku "Generuj PDF" generowany jest żądany plik PDF. Jak pokazano poniżej:

Wynik

Jak wygląda strona internetowa:

recoil NPM (Jak to działa dla programistów): Rysunek 2 – Strona internetowa do generowania plików PDF

Plik PDF wygenerowany po podaniu adresu URL https://ironpdf.com/nodejs/:

recoil NPM (Jak to działa dla programistów): Rysunek 3 – Plik PDF wygenerowany za pomocą IronPDF

Licencja IronPDF

recoil NPM (Jak to działa dla programistów): Rysunek 4 – Strona licencyjna IronPDF

Licencja Trial IronPDF pozwala użytkownikom zapoznać się z jej rozbudowanymi funkcjami przed zakupem. Więcej szczegółów na temat licencji wieczystych można znaleźć na stronie Informacje o licencjach IronPDF.

Umieść tutaj klucz licencyjny:

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

Wnioski

Recoil zapewnia nowoczesne i wydajne podejście do zarządzania stanem w aplikacjach React. Dzięki precyzyjnym aktualizacjom, zgodności z trybem współbieżnym oraz łatwości obsługi stanu asynchronicznego jest to atrakcyjny wybór dla programistów pragnących tworzyć skalowalne i wydajne aplikacje React.

Wykorzystując atomy i selektory, Recoil umożliwia modułowe i intuicyjne zarządzanie stanem globalnym, poprawiając ogólne wrażenia z programowania. Biblioteka IronPDF Node.js npm to pakiet Enterprise z funkcjami generowania i odczytu plików PDF. Programiści mogą z łatwością zintegrować te funkcje ze swoimi aplikacjami, korzystając z biblioteki IronPDF.

Darrius Serrant

Czat z zespołem inżynierów teraz

Full Stack Software Engineer (WebOps)

Darrius Serrant posiada tytuł licencjata z informatyki z Uniwersytetu Miami i pracuje jako Full Stack WebOps Marketing Engineer w Iron Software. Już od młodych lat zainteresował się kodowaniem, postrzegając informatykę jako zarówno tajemniczą, jak i dostępną, co czyni ją doskonałym medium dla kreatywności ...

Czytaj więcej