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

Type	use client	use server	Notes
string	✅	✅	both string value and iterables are supported.
number	✅	✅
bigint	✅	✅
boolean	✅	✅
undefined	✅	✅
null	✅	✅
Array	✅	✅	Only available in the item of serializable list.
Map	✅	✅	Only available in the item of serializable list.
Set	✅	✅	Only available in the item of serializable list.
TypedArray	✅	✅
ArrayBuffer	✅	✅
Date	✅	✅
object	✅	✅	Support only plain object(object initializers or JSON), null prototype not supported.
Promises	✅	✅	Only available in the serializable list.
ReactNode	✅	❌	Only Server Component can send it to Client Component via props.
FormData	❌	✅	Only server functions can return FormData instance.
symbol	⚠️	⚠️	Only symbols registered in the global Symbol registry via Symbol.for
function	⚠️	⚠️	Only server functions allowed.
class	❌	❌	Any instance objects are not serializable.

• 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!