Reaktion 19

Neue Funktionen in React 19

Was ist neu in REACT 19?

1. REACT-COMPILER

Was Neues?

• React optimiert automatisch erneute Renderings ohne manuellen Eingriff.

• Keine Notwendigkeit mehr für: useMemo(), useCallBack(), React.memo

Warum React Compiler?

• Manuelle Optimierung war für Entwickler mühsam.

• React Now verarbeitet Zustandsänderungen und Neurendering-Logik automatisch.

Vorteile

• React entscheidet, was wann neu gerendert wird.

• Reduziert den Entwickleraufwand.

• sauberere, einfachere Codebasis.

• betreibt derzeit Instagram in der Produktion.

2. SERVERKOMPONENTEN

Was Neues?

• Komponenten, die auf dem Server und nicht auf dem Client ausgeführt werden.

• Zuvor von Next.js entwickelt (Standard in V13).

• In React 19 sind Serverkomponenten nativ integriert.

Vorteile

• SEO-freundlich: Verbessert die Suchmaschinenoptimierung.

• Leistungssteigerung: Schnelleres Laden der ersten Seiten.

• Serverseitige Ausführung: Erledigt effizient Aufgaben wie API-Aufrufe.

Wie verwende ich Serverkomponenten?

1. Clientseitig (Standard): Alle React-Komponenten werden auf der Clientseite ausgeführt.

2. Serverseitig: Fügen Sie „use Server“ als erste Zeile Ihrer Komponente hinzu:
   

'use server';

export default async function requestUsername(formData) {
  const username = formData.get('username');
  return canRequest(username) ? 'successful' : 'failed';
}

Wichtige Hinweise

• Serverkomponenten werden nicht auf dem Client ausgeführt.

• In Kombination mit Aktionen optimieren sie Aufgaben wie die Formularbearbeitung und API-Anfragen.

• Next.js-Benutzer können bereits Serverkomponenten nutzen; React 19 bringt dies direkt zu React.

3. AKTIONEN

• Vor React19: Manuelle Behandlung von Async-Zuständen.

function handleSubmit() {
  setloading (true);
  try {
      const result = await saveData();
      setData(result);
      } 
  catch (err) 
     {
     setError(err);
     }
  finally
     {
     setloading(failse);
     } 
}

• Nach React19: Verwendung von useActionsState für eine saubere asynchrone Handhabung.

const [state, formAction] = useActionState(async (prevState, formData) => {
   const result = await saveData(formData);
   return result;
   }, null);

• Verarbeitet automatisch Ladevorgänge, Fehler und Statusaktualisierungen.

4. NEUE HAKEN

USEACTIONSTATE: FORMULARHANDHABUNG

Verwaltet automatisch den Einreichungsstatus und die Formularvalidierung.

• VOR REACT19:

const [isSubmitting, setIsSubmitting] = useState(false);

async function handleSubmit() {
  setIsSubmitting(true);
  try {
      await submitForm();
      }
  finally 
      {
      setIsSubmitting(false);
      }
}

• NACH REACT19:

useActionState vereinfacht die Formularübermittlung.

const [state, formAction] = useActionState(async (prevState, formData) => {
    return await submitForm(formData);
});

USEFORMSTATUS: FORMULARSTATUS VERFOLGEN

Zugriff auf Formularstatus wie „Ausstehend“, „Erfolgreich“ oder „Fehler“.

const status = useFormStatus();

<button type = "submit" disabled = { status.pending }>
  { status.pending ? "Submitting..." : "Submit" } 
</button>

USEOPTIMISTIC: OPTIMISTIC UI UPDATES

Vereinfacht optimistische Updates für eine bessere UX.

• VOR REACT19:

Sie haben die Benutzeroberfläche optimistisch aktualisiert, sie haben Rückgängigmachungen gehandhabt.

'use server';

export default async function requestUsername(formData) {
  const username = formData.get('username');
  return canRequest(username) ? 'successful' : 'failed';
}

• NACH REACT19:

useOptimistic macht es deklarativ.

function handleSubmit() {
  setloading (true);
  try {
      const result = await saveData();
      setData(result);
      } 
  catch (err) 
     {
     setError(err);
     }
  finally
     {
     setloading(failse);
     } 
}

5. DER USE()-HOOK

Was ist use()?

Der use()-Hook vereinfacht den asynchronen Datenabruf und die Kontextnutzung durch die direkte Verarbeitung von Versprechen.

• VOR REACT19: USEEFFECT VERWENDEN

Manuelle Behandlung von asynchronen Zuständen.

const [state, formAction] = useActionState(async (prevState, formData) => {
   const result = await saveData(formData);
   return result;
   }, null);

• NACH REACT19: DER USE()-HOOK

Asynchrone Daten direkt abrufen und Versprechen auflösen

const [isSubmitting, setIsSubmitting] = useState(false);

async function handleSubmit() {
  setIsSubmitting(true);
  try {
      await submitForm();
      }
  finally 
      {
      setIsSubmitting(false);
      }
}

Vorteile:

• Keine Notwendigkeit für useEffect oder useState.
• Saubererer und deklarativerer Code.
• Handelt Versprechen nahtlos ab.

6. SERVERKOMPONENTEN

Was sind Serverkomponenten?

Serverkomponenten rendern auf dem Server und senden kompakte Ergebnisse an den Client, wodurch die Leistung verbessert wird.

• VOR REACT19: TRADITIONELLER CLIENT – SEITLICHES RENDERING

Sie mussten useEffect für den Datenabruf verwenden und SSR erforderte komplexe Tools.

const [state, formAction] = useActionState(async (prevState, formData) => {
    return await submitForm(formData);
});

• NACH REACT19: SERVER – SEITLICHES RENDERING

React Server-Komponenten lassen sich nahtlos integrieren.

const status = useFormStatus();

<button type = "submit" disabled = { status.pending }>
  { status.pending ? "Submitting..." : "Submit" } 
</button>

Vorteile:

• Schnellere Seitenladevorgänge (kein umfangreiches clientseitiges JS).
• Verbesserte SEO und reduzierte Paketgröße.

7. VERBESSERTES LADEN VON VERMÖGENSWERTEN

React19 verbessert das Laden von Assets wie Bildern und Skripten im Hintergrund.

• VOR REACT19:

Sie benötigten manuelle Konfigurationen.

function handleClick() {
 setItems([...items, newItem]);
 saveItem(newItem).catch(() => setItems(items)); // Revert on error
}

• NACH REACT19: NATIVE LAZY LOADIING

Assets werden jetzt ohne Eingriff effizient geladen.

const [optimisticItems, addOptimisticItem] = useOptimistic(items);

function handleClick() {
 addOptimisticItem(newItem);
}

Vorteile:

• Schnellere Ladezeiten.
• Bessere Benutzererfahrung mit weniger Verzögerungen.

ABSCHLUSS

Reaktion 19 bringt:

• Vereinfachte asynchrone Statusverwaltung mit Aktionen.
• Neue Hooks wie useActionState,
• useFormStatus und UseOptimistic.
• Verwenden Sie den Hook () für eine einfache asynchrone Datenverarbeitung.
• Nahtlose Serverkomponenten für bessere Leistung.
• Sauberes Ref-Management und verbessertes Laden von Assets.

Das obige ist der detaillierte Inhalt vonReaktion 19. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!