Maison >interface Web >js tutoriel >Un aide-mémoire sur les fonctionnalités du serveur React

Un aide-mémoire sur les fonctionnalités du serveur React

Barbara Streisand
Barbara Streisandoriginal
2024-12-22 12:31:09376parcourir

A React server feature cheat sheet

Bases des fonctionnalités de React Server

  • Composant serveur (React Server Component, RSC) : un composant qui s'exécute sur le serveur et s'affiche au client de la même manière que SSR.
  • Fonction serveur (alias Actions serveur) : une fonction qui s'exécute uniquement sur les serveurs et envoie les informations au client.

Directives

  • 'use client' : si vous utilisez un environnement activé pour le "composant serveur", vous devez marquer use client en haut du fichier pour le marquer comme composant client.
  • 'use server' : si vous envisagez de muter les informations sur le serveur, vous devez marquer la directive use server en haut du corps de la fonction dans le composant ou le fichier serveur pour fonctionner uniquement sur le serveur.

Composant serveur

  • RSC n'est ni avec état ni cycle de vie. Vous ne pouvez utiliser aucune fonction hook (useState, useEffect, etc.) sur le composant serveur.
  • RSC peut avoir une fonction asynchrone.
  • RSC peut avoir des fonctions de serveur. mais vous devez marquer « utiliser le serveur » en haut du corps de la fonction.
  • RSC peut avoir des enfants à la fois dans le composant serveur et dans le composant client.
  • RSC ne peut exécuter aucune API de navigateur.
  • Votre RSC peut transmettre des accessoires de tout type à RSC. peut également transmettre le type d'accessoires avec une limitation au composant client. Consultez le tableau des types de directives ci-dessous.
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>;
}

Fonction serveur

  • lors de la définition, vous devez avoir la directive 'use server' dans le corps ou le fichier de la fonction.
  • Vous pouvez exécuter n'importe quelle fonctionnalité du serveur sur le corps de la fonction.
  • Vous ne pouvez pas exécuter l'API du navigateur sur le corps de la fonction.
  • Vous pouvez appeler des fonctions serveur à la fois sur le serveur et sur le client.
  • Vous pouvez renvoyer une valeur avec des limitations. Consultez le tableau des types de directives ci-dessous.

Déclaration de la fonction serveur dans le composant serveur

import Button from './Button';

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

    await db.notes.create();
  }

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

Déclaration de la fonction serveur dans le fichier séparé

"use server";

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

Utilisation de la fonction serveur dans le composant client

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>;
}

Comparaison des types de valeurs de handle dans les directives

  • utiliser le client : transmettre le type d'accessoire du composant serveur au composant client.
  • utiliser le serveur : le type de retour des fonctions serveur
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.
  • Les autres types et instances ne sont pas disponibles.

Heureux de réagir !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn