Ein Spickzettel für React-Serverfunktionen

Grundlagen der React Server-Funktion

• Serverkomponente (React Server Component, RSC): Eine Komponente, die auf dem Server ausgeführt wird und auf dem Client genauso gerendert wird wie SSR.
• Serverfunktion (auch bekannt als Serveraktionen): Eine Funktion, die nur auf den Servern ausgeführt wird und die Informationen an den Client sendet.

Richtlinien

• „Client verwenden“: Wenn Sie eine Umgebung mit aktivierter „Serverkomponente“ verwenden, sollten Sie „Client verwenden“ oben in der Datei markieren, um ihn als Client-Komponente zu kennzeichnen.
• „Server verwenden“: Wenn Sie erwägen, die Informationen auf dem Server zu ändern, sollten Sie oben im Funktionskörper in der Serverkomponente oder -datei die Direktive „Server verwenden“ markieren, um nur auf dem Server zu arbeiten.

Serverkomponente

• RSC ist weder zustandsbehaftet noch lebenszyklusorientiert. Sie können keine Hook-Funktionen (useState, useEffect usw.) auf der Serverkomponente verwenden.
• RSC kann eine asynchrone Funktion haben.
• RSC kann Serverfunktionen haben. Sie müssen jedoch oben im Funktionskörper „Server verwenden“ markieren.
• RSC kann sowohl in der Serverkomponente als auch in der Clientkomponente untergeordnete Elemente haben.
• RSC kann keine Browser-API ausführen.
• Ihr RSC kann Requisiten jeglicher Art an RSC weitergeben. Außerdem kann der Props-Typ mit Einschränkung an die Client-Komponente übergeben werden. Sehen Sie sich die Tabelle mit den Direktiventypen unten an.

import marked from 'marked'; // Not included in bundle
import sanitizeHtml from 'sanitize-html'; // Not included in bundle

async function Page({page}) {
  // NOTE: loads *during* render, when the app is built.
  const content = await file.readFile(`${page}.md`);

  return <div>{sanitizeHtml(marked(content))}</div>;
}

Serverfunktion

• Bei der Definition muss die Direktive „Server verwenden“ im Funktionskörper oder in der Datei vorhanden sein.
• Sie können beliebige Serverfunktionen auf dem Funktionskörper ausführen.
• Sie können die Browser-API nicht auf dem Funktionskörper ausführen.
• Sie können Serverfunktionen sowohl auf dem Server als auch auf dem Client aufrufen.
• Sie können den Wert mit Einschränkungen zurückgeben. Sehen Sie sich die Tabelle mit den Direktiventypen unten an.

Serverfunktion in der Serverkomponente deklarieren

import Button from './Button';

function EmptyNote () {
  async function createNoteAction() {
    // Server Function
    'use server';

    await db.notes.create();
  }

  return <Button onClick={createNoteAction}/>;
}

Serverfunktion in der separaten Datei deklarieren

"use server";

export async function updateName(name) {
  if (!name) {
    return {error: 'Name is required'};
  }
  await db.users.updateName(name);
}

Verwendung der Serverfunktion in der Client-Komponente

import marked from 'marked'; // Not included in bundle
import sanitizeHtml from 'sanitize-html'; // Not included in bundle

async function Page({page}) {
  // NOTE: loads *during* render, when the app is built.
  const content = await file.readFile(`${page}.md`);

  return <div>{sanitizeHtml(marked(content))}</div>;
}

Vergleich von Handle-Werttypen in Anweisungen

• Client verwenden: Übergeben des Requisitentyps von der Serverkomponente an die Clientkomponente.
• Server verwenden: Der Rückgabetyp der Serverfunktionen

• Die anderen Typen und Instanzen sind nicht verfügbar.

Viel Spaß beim Reagieren!

Das obige ist der detaillierte Inhalt vonEin Spickzettel für React-Serverfunktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!