Réagissez un guide complet

React 19 est là ! ? Dans cet article, nous explorerons les nouvelles fonctionnalités et améliorations de React 19. Allons-y !

Quoi de neuf dans React 19

React 19, la dernière version majeure de l'équipe React, est dotée de plusieurs fonctionnalités et améliorations révolutionnaires conçues pour rendre le processus de développement plus efficace et les applications résultantes plus rapides et plus puissantes. Cette version continue de s'appuyer sur les bases solides posées par ses prédécesseurs, en introduisant des mises à jour significatives du cadre de base. Dans ce blog, nous explorerons les fonctionnalités clés de React 19, notamment le nouveau compilateur React, les composants serveur et les actions serveur, les nouveaux hooks et API, et bien plus encore !

Compilateur de réaction

L'une des fonctionnalités les plus intéressantes de React 19 est le nouveau compilateur React, également connu sous le nom de React Fizz. Ce compilateur est conçu pour optimiser les performances des applications React en générant du code JavaScript très efficace. Le compilateur React transforme votre code JSX et JavaScript en JavaScript hautement optimisé qui peut s'exécuter plus rapidement, avec une meilleure utilisation de la mémoire et moins de surcharge. Ceci est encore en mode expérimental, mais c'est une fonctionnalité prometteuse qui changera probablement la donne pour les développeurs React. Il fonctionne avec du JavaScript simple et comprend les règles de React, vous n'avez donc pas besoin de réécrire de code pour l'utiliser.

Que fait le compilateur ?

Afin d'optimiser les applications, React Compiler mémorise automatiquement les composants et les hooks, et optimise également le processus de rendu. Cela signifie que React ne restituera que les composants qui ont réellement changé, plutôt que de restituer l'intégralité de l'arborescence des composants. Cela peut conduire à des améliorations significatives des performances, en particulier pour les applications volumineuses et complexes.

Si votre base de code est déjà très bien mémorisée, vous ne vous attendez peut-être pas à voir des améliorations majeures des performances avec le compilateur. Cependant, dans la pratique, il est difficile de mémoriser les dépendances correctes qui causent des problèmes de performances. Le compilateur peut vous aider.

Que suppose le compilateur ?

React Compiler suppose que votre code :

• Est un JavaScript sémantique valide
• Test que les valeurs et propriétés nullables/facultatives sont définies avant d'y accéder (par exemple, en activant strictNullChecks si vous utilisez TypeScript), c'est-à-dire if (object.nullableProperty) { object.nullableProperty.foo } ou avec un objet de chaînage facultatif. nullableProperty?.foo
• Suit les règles de React

React Compiler peut vérifier de nombreuses règles de React de manière statique et ignorera la compilation en toute sécurité lorsqu'il détecte une erreur.

Composants du serveur et actions du serveur

Les composants du serveur peuvent s'exécuter au moment de la construction pour lire à partir du système de fichiers ou récupérer du contenu statique, un serveur Web n'est donc pas requis. Par exemple, vous souhaiterez peut-être lire des données statiques à partir d'un système de gestion de contenu.

Composants serveur sans serveur

Sans composants serveur, il est courant de récupérer des données statiques sur le client avec un effet :

// bundle.js
import marked from 'marked'; // 35.9K (11.2K gzipped)
import sanitizeHtml from 'sanitize-html'; // 206K (63.3K gzipped)

function Page({page}) {
  const [content, setContent] = useState('');
  // NOTE: loads *after* first page render.
  useEffect(() => {
    fetch(`/api/content/${page}`).then((data) => {
      setContent(data.content);
    });
  }, [page]);

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

Avec les composants serveur, vous pouvez récupérer des données statiques au moment de la construction :

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

La sortie rendue peut être mise en cache et servie de manière statique, de sorte que le serveur n'a pas besoin d'exécuter de JavaScript. Cela peut représenter un gain important en termes de performances, en particulier sur les appareils mobiles. Lorsque l'application se charge, elle peut immédiatement afficher le contenu, sans attendre une demande réseau.

Composants serveur avec un serveur

Les composants serveur peuvent également s'exécuter sur un serveur. Ceci est utile pour récupérer des données qui ne sont pas statiques, comme des données spécifiques à l'utilisateur ou des données qui changent fréquemment. Par exemple, vous souhaiterez peut-être récupérer des données spécifiques à l'utilisateur à partir d'une base de données, ce qui est généralement réalisé à l'aide d'un hook useEffect :

// bundle.js
function Note({id}) {
  const [note, setNote] = useState('');
  // NOTE: loads *after* first render.
  useEffect(() => {
    fetch(`/api/notes/${id}`).then(data => {
      setNote(data.note);
    });
  }, [id]);

  return (
    <div>
      <Author id={note.authorId} />
      <p>{note}</p>
    </div>
  );
}

function Author({id}) {
  const [author, setAuthor] = useState('');
  // NOTE: loads *after* Note renders.
  // Causing an expensive client-server waterfall.
  useEffect(() => {
    fetch(`/api/authors/${id}`).then(data => {
      setAuthor(data.author);
    });
  }, [id]);

  return <span>By: {author.name}</span>;
}

Avec les composants serveur, vous pouvez lire les données et les restituer dans le composant :

import db from './database';

async function Note({id}) {
  // NOTE: loads *during* render.
  const note = await db.notes.get(id);
  return (
    <div>
      <Author id={note.authorId} />
      <p>{note}</p>
    </div>
  );
}

async function Author({id}) {
  // NOTE: loads *after* Note,
  // but is fast if data is co-located.
  const author = await db.authors.get(id);
  return <span>By: {author.name}</span>;
}

Les composants du serveur peuvent être rendus dynamiques en les récupérant à partir d'un serveur, où ils peuvent accéder aux données et les restituer à nouveau. Cette nouvelle architecture d'application combine le modèle mental simple « demande/réponse » des applications multipages centrées sur le serveur avec l'interactivité transparente des applications monopage centrées sur le client, vous offrant ainsi le meilleur des deux mondes.

Actions du serveur

Lorsqu'une action serveur est définie avec la directive "use server", votre framework créera automatiquement une référence à la fonction serveur et transmettra cette référence au composant client. Lorsque cette fonction est appelée sur le client, React enverra une requête au serveur pour exécuter la fonction et renverra le résultat.

Les actions du serveur peuvent être créées dans les composants du serveur et transmises en tant qu'accessoires aux composants du client, ou elles peuvent être importées et utilisées dans les composants du client.

Creating a Server Action from a Server Component:

// Server Component
import Button from './Button';

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

    await db.notes.create();
  }

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

When React renders the EmptyNote Server Component, it will create a reference to the createNoteAction function, and pass that reference to the Button Client Component. When the button is clicked, React will send a request to the server to execute the createNoteAction function with the reference provided:

"use client";

export default function Button({onClick}) { 
  console.log(onClick); 
  return <button onClick={onClick}>Create Empty Note</button>
}

Importing and using a Server Action in a Client Component:

Client Components can import Server Actions from files that use the "use server" directive:

"use server";

export async function createNoteAction() {
  await db.notes.create();
}

When the bundler builds the EmptyNote Client Component, it will create a reference to the createNoteAction function in the bundle. When the button is clicked, React will send a request to the server to execute the createNoteAction function using the reference provided:

"use client";
import {createNoteAction} from './actions';

function EmptyNote() {
  console.log(createNoteAction);
  // {$$typeof: Symbol.for("react.server.reference"), $$id: 'createNoteAction'}
  <button onClick={createNoteAction} />
}

New Hooks and APIs

Besides the React Compiler and Server Components, React 19 introduces several new hooks and APIs that make it easier to build complex applications.

useOptimistic

The useOptimistic hook allows you to update the UI optimistically before the server responds. This can make your application feel more responsive and reduce the perceived latency. The hook takes a callback function that performs the optimistic update, and an optional configuration object that specifies the server request to send after the optimistic update.

useFormStatus

The useFormStatus hook allows you to track the status of a form, such as whether it is pristine, dirty, valid, or invalid. This can be useful for displaying feedback to the user, such as error messages or success messages.

useFormState

The useFormState hook allows you to manage the state of a form, such as the values of the form fields and the validity of the form. This can be useful for building complex forms with dynamic validation logic.

This hook requires two arguments: the initial form state and a validation function. The validation function takes the form state as input and returns an object with the validity of each form field.

The new use API

React 19 introduces a new use API that is a versatile way to read values from resources like Promises or context. The use API is similar to the useEffect hook, but it doesn't take a callback function. Instead, it returns the value of the resource, and re-renders the component when the value changes.

const value = use(resource);

Example:

import { use } from 'react';

function MessageComponent({ messagePromise }) {
  const message = use(messagePromise);
  const theme = use(ThemeContext);
  // ...

Conclusion - Should You Upgrade to React 19?

React 19 is a major release that introduces several groundbreaking features and enhancements to the core framework. The new React Compiler, Server Components, and Server Actions are designed to make the development process more efficient and the resulting applications faster and more powerful. The new hooks and APIs make it easier to build complex applications and improve the user experience. If you're already using React, upgrading to React 19 is definitely worth considering.

But at the same time it's important to note that React 19 is still in experimental mode, and some features may change before the final release. It's recommended to test your application with React 19 in a non-production environment before upgrading. If you're starting a new project, React 19 is a great choice, as it provides a solid foundation for building modern web applications.

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!