React Ein umfassender Leitfaden

React 19 ist da! ? In diesem Artikel erkunden wir die neuen Funktionen und Verbesserungen in React 19. Lassen Sie uns eintauchen!

Was ist neu in React 19?

React 19, die neueste Hauptversion des React-Teams, verfügt über mehrere bahnbrechende Funktionen und Verbesserungen, die den Entwicklungsprozess effizienter und die daraus resultierenden Anwendungen schneller und leistungsfähiger machen sollen. Diese Version baut weiterhin auf dem starken Fundament ihrer Vorgänger auf und führt bedeutende Aktualisierungen des Kern-Frameworks ein. In diesem Blog werden wir die wichtigsten Funktionen von React 19 erkunden, darunter den neuen React Compiler, Serverkomponenten und Serveraktionen, neue Hooks und APIs und vieles mehr!

Reagieren Sie auf den Compiler

Eine der aufregendsten Funktionen in React 19 ist der neue React Compiler, auch bekannt als React Fizz. Dieser Compiler soll die Leistung von React-Anwendungen optimieren, indem er hocheffizienten JavaScript-Code generiert. Der React Compiler wandelt Ihren JSX- und JavaScript-Code in hochoptimiertes JavaScript um, das schneller, mit besserer Speichernutzung und weniger Overhead ausgeführt werden kann. Dies befindet sich noch im experimentellen Modus, aber es ist eine vielversprechende Funktion, die für React-Entwickler wahrscheinlich bahnbrechend sein wird. Es funktioniert mit einfachem JavaScript und versteht die Regeln von React, sodass Sie keinen Code neu schreiben müssen, um es zu verwenden.

Was macht der Compiler?

Um die Anwendungen zu optimieren, merkt sich React Compiler automatisch die Komponenten und Hooks und optimiert auch den Rendering-Prozess. Das bedeutet, dass React nur die tatsächlich geänderten Komponenten neu rendert und nicht den gesamten Komponentenbaum neu rendert. Dies kann insbesondere bei großen und komplexen Anwendungen zu deutlichen Leistungssteigerungen führen.

Wenn Ihre Codebasis bereits sehr gut auswendig gelernt ist, können Sie möglicherweise keine größeren Leistungsverbesserungen mit dem Compiler erwarten. In der Praxis ist es jedoch schwierig, sich die richtigen Abhängigkeiten zu merken, die zu Leistungsproblemen führen. Der Compiler kann Ihnen dabei helfen.

Was geht der Compiler voraus?

React Compiler geht davon aus, dass Ihr Code:

• Ist gültiges, semantisches JavaScript
• Testet, ob nullbare/optionale Werte und Eigenschaften definiert sind, bevor auf sie zugegriffen wird (z. B. durch Aktivieren von strictNullChecks bei Verwendung von TypeScript), d. h. if (object.nullableProperty) { object.nullableProperty.foo } oder mit einem optional verketteten Objekt. nullableProperty?.foo
• Befolgt die Reaktionsregeln

Der React Compiler kann viele der React-Regeln statisch überprüfen und überspringt die Kompilierung sicher, wenn er einen Fehler erkennt.

Serverkomponenten und Serveraktionen

Serverkomponenten können zur Erstellungszeit ausgeführt werden, um aus dem Dateisystem zu lesen oder statische Inhalte abzurufen, sodass kein Webserver erforderlich ist. Beispielsweise möchten Sie möglicherweise statische Daten aus einem Content-Management-System lesen.

Serverkomponenten ohne Server

Ohne Serverkomponenten ist es üblich, statische Daten auf dem Client mit einem Effekt abzurufen:

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

Mit Server Components können Sie statische Daten zur Erstellungszeit abrufen:

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

Die gerenderte Ausgabe kann zwischengespeichert und statisch bereitgestellt werden, sodass der Server kein JavaScript ausführen muss. Dies kann ein großer Leistungsgewinn sein, insbesondere auf Mobilgeräten. Wenn die App geladen wird, kann sie den Inhalt sofort anzeigen, ohne auf eine Netzwerkanfrage warten zu müssen.

Serverkomponenten mit einem Server

Serverkomponenten können auch auf einem Server ausgeführt werden. Dies ist nützlich, um Daten abzurufen, die nicht statisch sind, z. B. benutzerspezifische Daten oder Daten, die sich häufig ändern. Beispielsweise möchten Sie möglicherweise benutzerspezifische Daten aus einer Datenbank abrufen, was im Allgemeinen durch die Verwendung eines useEffect-Hooks erreicht wird:

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

Mit Serverkomponenten können Sie die Daten lesen und in der Komponente rendern:

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

Serverkomponenten können dynamisch gemacht werden, indem sie erneut von einem Server abgerufen werden, wo sie auf die Daten zugreifen und erneut rendern können. Diese neue Anwendungsarchitektur kombiniert das einfache mentale „Anfrage/Antwort“-Modell serverzentrierter Multi-Page-Apps mit der nahtlosen Interaktivität clientzentrierter Single-Page-Apps und bietet Ihnen das Beste aus beiden Welten.

Serveraktionen

Wenn eine Serveraktion mit der Direktive „Server verwenden“ definiert wird, erstellt Ihr Framework automatisch einen Verweis auf die Serverfunktion und übergibt diesen Verweis an die Clientkomponente. Wenn diese Funktion auf dem Client aufgerufen wird, sendet React eine Anfrage an den Server, um die Funktion auszuführen, und gibt das Ergebnis zurück.

Serveraktionen können in Serverkomponenten erstellt und als Requisiten an Clientkomponenten übergeben werden, oder sie können importiert und in Clientkomponenten verwendet werden.

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.

Das obige ist der detaillierte Inhalt vonReact Ein umfassender Leitfaden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!