NODE-HILFE

recoil NPM (Wie es für Entwickler funktioniert)

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

Aktualisiert:Juni 22, 2025

Zustandsverwaltung ist ein kritischer Aspekt beim Aufbau robuster und skalierbarer React-Anwendungen. Unter den verschiedenen Zustandsverwaltung-Bibliotheken hat sich Recoil als eine leistungsstarke und flexible Option herauskristallisiert. Von Facebook als experimentelles Zustandsverwaltung-Framework entwickelt, vereinfacht Recoil komplexe Szenarien der Zustandsverwaltung und bietet eine intuitivere API zur Verwaltung globaler Zustände in React-Anwendungen.

Dieser Artikel untersucht die Kernkonzepte von Recoil, seine Vorteile und wie man damit in einem React-Projekt beginnt. Außerdem werden wir uns die IronPDF Node.js PDF Generation Tools Bibliothek ansehen, um PDFs von Website-URLs oder HTML zu generieren.

Was ist das Recoil-Paket?

Recoil ist eine Zustandsverwaltung-Bibliothek für React, die darauf abzielt, die Einschränkungen bestehender Lösungen wie Redux und Context API zu adressieren. Es bietet einen einfacheren und leistungsfähigeren Weg, um geteilten Zustand in React-Anwendungen zu verwalten, und bietet Funktionen wie feingranulare Aktualisierungen, asynchrone Zustandsverwaltung und einfache Integration in den Concurrent Mode von React.

Kernkonzepte

Recoil führt mehrere Schlüsselkonzepte ein, die es von anderen Zustandsverwaltung-Bibliotheken unterscheiden:

Atome: Atome sind die grundlegenden Einheiten des Zustands in Recoil. Sie repräsentieren Zustandsteile, die über Komponenten hinweg geteilt werden können. Wenn sich der Wert eines Atoms ändert, wird jede Komponente, die auf dieses Atom abonniert ist, automatisch neu gerendert.
Selektoren: Selektoren sind reine Funktionen, die Zustand von einem oder mehreren Atomen oder anderen Selektoren ableiten. Sie können synchron oder asynchron sein und ermöglichen komplexe Zustandsableitungen und Datenabfragelogik.
RecoilRoot: Diese Komponente wird verwendet, um den Recoil-Kontext im Komponentenhierarchie bereitzustellen. Es ist ähnlich dem Context-Provider von React und muss den Anwendungsteil umschließen, der den Recoil-Zustand verwendet.

Vorteile von Recoil

Recoil bietet mehrere Vorteile gegenüber anderen Zustandsverwaltungslösungen:

Feingranulare Updates: Im Gegensatz zu Redux, wo jede Zustandsänderung zu Neurenderings in mehreren Komponenten führen kann, stellt Recoil sicher, dass nur die Komponenten neu gerendert werden, die auf den geänderten Zustand abonniert sind, was zu einer besseren Leistung führt.
Kompatibilität mit Concurrent Mode: Recoil wurde entwickelt, um nahtlos mit dem Concurrent Mode von React zu arbeiten und ermöglicht reibungslosere Benutzererfahrungen mit Funktionen wie Zeitaufteilung und Suspense.
Einfache asynchrone Zustände: Die Handhabung asynchroner Zustände, wie die Datenabfrage, ist in Recoil aufgrund der integrierten Unterstützung für asynchrone Selektoren einfacher.
Skalierbarkeit: Recoil lässt sich aufgrund seines modularen Ansatzes der Zustandsverwaltung gut für große Anwendungen skalieren.
Gemeinschaftsprojekt: Unter einer MIT-Lizenz ist Recoil frei verwendbar, modifizierbar und verteilbar. Dies fördert eine weit verbreitete Anwendung und Zusammenarbeit unter Entwicklern, ermöglicht jedem freien Aufbau, Fehlerbehebungen beizutragen und Modifikationen zum Zwecke der Verbesserung von Recoil zu teilen. Diese Entwicklung von Recoil erfolgt in ihrem Open-Source-GitHub-Repository.

Erste Schritte mit Recoil

Um Recoil in einer React-Anwendung zu verwenden, befolgen Sie diese Schritte:

npm Install Recoil

Um die neueste stabile Version zu installieren, führen Sie den folgenden Befehl aus, da das Recoil-Paket in npm lebt:

npm install recoil

npm install recoil

SHELL

RecoilRoot einrichten

Umschließen Sie Ihre Anwendung mit der RecoilRoot-Komponente.

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

Atome und Selektoren definieren

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

Verwenden Sie Atome und Selektoren in Komponenten

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

Einführung in IronPDF

recoil NPM (Wie es für Entwickler funktioniert): Abbildung 1 - IronPDF-Webseite

IronPDF ist eine beliebte PDF-Erzeugungsbibliothek, die zum Erstellen, Bearbeiten und Konvertieren von PDF-Dokumenten verwendet wird. Das IronPDF-npm-Paket ist speziell für Node.js-Anwendungen konzipiert. Hier sind einige wichtige Funktionen und Details über das IronPDF-npm-Paket:

Wichtige Merkmale

HTML zu PDF Konvertierung

Konvertieren Sie HTML-Inhalte mühelos in PDF-Dokumente. Dieses Feature ist besonders nützlich zur Erzeugung dynamischer PDFs aus Webinhalten.

URL-zu-PDF-Konvertierung

Erzeugen Sie PDFs direkt von URLs, sodass Sie die Inhalte von Webseiten erfassen und als PDF-Dateien programmatisch speichern können.

PDF-Manipulation

Verschmelzen, teilen und manipulieren Sie vorhandene PDF-Dokumente mit Leichtigkeit. IronPDF bietet Funktionen wie das Anhängen von Seiten, das Splitten von Dokumenten und mehr.

PDF-Sicherheit

Sichern Sie Ihre PDF-Dokumente, indem Sie sie mit Passwörtern verschlüsseln oder digitale Signaturen anwenden. IronPDF bietet Optionen zum Schutz Ihrer sensiblen Dokumente vor unberechtigtem Zugriff.

Hochwertige Ausgabe

Erzeugen Sie hochwertige PDF-Dokumente mit präziser Wiedergabe von Text, Bildern und Formatierungen. IronPDF stellt sicher, dass Ihre generierten PDFs die Originalinhalte getreu wiedergeben.

Plattformübergreifende Kompatibilität

IronPDF ist mit verschiedenen Plattformen kompatibel, einschließlich Windows, Linux und macOS, was es für eine Vielzahl von Entwicklungsumgebungen geeignet macht.

Einfache Integration

Integrieren Sie IronPDF mühelos in Ihre Node.js-Anwendungen mithilfe seines npm-Pakets. Die API ist gut dokumentiert, was es einfach macht, PDF-Erzeugungsfunktionen in Ihre Projekte einzubauen.

Installation

Um das IronPDF NPM-Paket zu installieren, verwenden Sie den folgenden Befehl:

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

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

SHELL

PDFs generieren mit IronPDF und Recoil

Abhängigkeiten installieren: Erstellen Sie zunächst ein neues Next.js-Projekt (falls Sie noch keines haben). Verweisen Sie auf dieses Next.js-Setup-Tutorial für detaillierte Anweisungen oder verwenden Sie den folgenden Befehl:

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

Navigieren Sie als Nächstes in Ihr Projektverzeichnis:

cd recoil-pdf

cd recoil-pdf

SHELL

Installieren Sie die erforderlichen Pakete:

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

Fügen Sie die Datei 'app.js' hinzu, um Recoil wie unten einzubinden:

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-Erstellungs-API: Der erste Schritt ist das Erstellen einer Backend-API, um das PDF-Dokument zu generieren. Da IronPDF nur serverseitig ausgeführt wird, müssen wir eine API erstellen, die aufgerufen wird, wenn Benutzer ein PDF generieren möchten. Erstellen Sie eine Datei im Pfad pages/api/pdf.js und fügen Sie den unten stehenden Codeinhalt hinzu:

// 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 benötigt einen Lizenzschlüssel, den Sie von der IronPDF Trial License Page erhalten und in den obigen Code einfügen.

Fügen Sie den unten stehenden Code hinzu, um eine URL vom Benutzer zu akzeptieren, ein PDF von der URL zu generieren und es in die index.js-Datei zu speichern:

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

Code Erklärung

Erstellen Sie einen Atom-Zustand mit const textState = atom() von Recoil, der zum Speichern der vom Benutzer im Eingabefeld eingegebenen URL verwendet wird.
Fügen Sie die Komponenten Überschrift, Eingabe und Schaltfläche hinzu.
Führen Sie die Anwendung mit yarn dev aus und geben Sie dann die URL der Website ein, die als PDF erstellt werden soll.
Wenn die Schaltfläche 'PDF generieren' geklickt wird, wird das angeforderte PDF generiert. Wie unten dargestellt:

Ausgabe

Wie die Website aussieht:

recoil NPM (Wie es für Entwickler funktioniert): Abbildung 2 - Website zur PDF-Erzeugung

Das PDF, das generiert wurde, als die URL https://ironpdf.com/nodejs/ eingegeben wurde:

recoil NPM (Wie es für Entwickler funktioniert): Abbildung 3 - Erzeugtes PDF mit IronPDF

IronPDF-Lizenz

recoil NPM (Wie es für Entwickler funktioniert): Abbildung 4 - IronPDF Lizenzseite

Die IronPDF Testlizenz ermöglicht Benutzern, seine umfangreichen Funktionen vor dem Kauf auszuprobieren. Weitere Details zur unbefristeten Lizenzierung finden Sie auf der IronPDF Lizenzinformationen-Seite.

Platzieren Sie hier den Lizenzschlüssel:

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

Abschluss

Recoil bietet einen modernen und effizienten Ansatz zur Zustandsverwaltung in React-Anwendungen. Seine feingranularen Updates, die Kompatibilität mit dem Concurrent Mode und die einfache Handhabung asynchroner Zustände machen es zu einer überzeugenden Wahl für Entwickler, die skalierbare und leistungsstarke React-Apps bauen möchten.

Durch die Nutzung von Atomen und Selektoren ermöglicht Recoil eine modulare und intuitive Art, den globalen Zustand zu verwalten, und verbessert das gesamte Entwicklungserlebnis. IronPDF Node.js Bibliothek npm ist ein Unternehmenspaket mit PDF-Generierung und Lese-Funktionalitäten. Entwickler können diese Funktionalitäten einfach in ihre Apps integrieren, indem sie die IronPDF-Bibliothek verwenden.

Darrius Serrant

Jetzt mit dem Ingenieurteam chatten

Full-Stack-Software-Ingenieur (WebOps)

Darrius Serrant hat einen Bachelor-Abschluss in Informatik von der University of Miami und arbeitet als Full-Stack-WebOps-Marketing-Ingenieur bei Iron Software. Seit seiner Jugend vom Programmieren angezogen, sah er die Informatik als sowohl mysteriös als auch zugänglich, was es zum perfekten Medium für Kreativität und Problemlösung ...