Reagieren Sie auf die neuen Updates

Diese Woche werden wir über die neuen React 19-Updates und Hooks sprechen. Nachdem ich einige dieser neuen Updates durchlaufen und verwendet habe, kann ich nur zustimmen, dass sie einige der strengen Aktivitäten vereinfacht haben, die Entwickler beim Erstellen von Apps durchlaufen, insbesondere interaktiver formularbezogener Anwendungen.

Kommen Sie mit und lassen Sie uns einige dieser neuen Updates erkunden.

React Compiler: Der React Compiler wählt Ihren React-Code aus, übersetzt ihn in einen JavaScript-Code für den Browser und verwaltet den Status Ihrer Komponente oder Benutzeroberfläche. Diese einzigartige Aktion trägt dazu bei, die Leistung Ihrer Anwendung zu optimieren.

Wenn Sie mit dem useMemo-Hook, dem useCallback-Hook und dem React.Memo vertraut sind, werden Sie verstehen, dass sie dabei helfen, Ihre Komponenten auswendig zu lernen (Werte oder Funktionen für zukünftige Verwendungen zu speichern), sodass sie nicht erneut verwendet werden müssen. rendern, wenn keine Zustandsänderungen vorliegen. Wenn sich der Status ändert, rendert React die betreffende Komponente und ihre untergeordneten Komponenten neu. Wenn sich in Ihrem Code keine Änderungen ergeben, bleibt die Komponente unverändert und behält den vorherigen Speicher, Wert und Status in der Komponente oder im Hook für die Zukunft bei Verwendungen; Dadurch wird die Leistung Ihrer Komponenten optimiert. Genau das macht der React Compiler automatisch, ohne dass einer der oben genannten Hooks manuell aufgerufen werden muss.

Formularaktionen: Einer der größten Vorteile der Verwendung von React ist die Verwaltung und Änderung des Zustands, und dies geschieht meistens, wenn wir verwenden Elemente. Formulare helfen uns, Benutzerinteraktivität effektiver zu erstellen und zu verwalten.

Mit Formularaktionen benötigen Sie keine Event-Handler wie onSubmit und onChange, um eine Live-Mutation von Daten zu bewirken, stattdessen können wir eine Aktion-Requisite übergeben zum

-Element, das eine Funktion empfängt, die das Ereignis auslöst.

const myFunction = async (formData) => {
  const [name, setName] = useState("")

  const updatedName = await nameChange(formData.get("name"))
     setName(updatedName)
}

<form action={myFunction}>
   <input type="name" 
          name="name" _// this is important to be able to get our data //_
   />
   <button type="submit">Submit</button>
</form>

Mit diesem Ansatz benötigen wir nicht die Anwendung von useState, um Daten über event.target.value zu mutieren, sondern in myFunction Holen Sie sich die mutierten Daten durch ein Argument.

Das bedeutet, dass wir aus dem -Element in unserem Formular ein Namensattribut festlegen müssen. Die Verwendung dieser Methode bedeutet, dass wir React das Formular selbst über das Native React-Formularobjekt verarbeiten können, anstatt den Status manuell über Ereignishandler zu ändern.

Serverkomponenten: React 19 ermöglicht das Rendern von Komponenten auf einem Server vor dem Bündeln, in einer von der Clientanwendung oder dem SSR-Server-Setup getrennten Umgebung. Die Serverkomponenten sind nicht mit SSR (serverseitiges Rendering) identisch, sondern eine separate Serverumgebung in React Server Components.
Mit dieser Funktion können Komponenten vorzeitig vorab gerendert werden, was zu schnelleren Inhaltsanzeigen und einer kürzeren Ladezeit führt.

Metadaten: React 19 ermöglicht flexible Metadaten. Entwickler können die title, description und andere meta-Tags einzelner Komponenten über die DocumentHead-Komponente verwalten. Dies wird dazu beitragen, SEO (Suchmaschinenoptimierung) zu verbessern.

Const AboutUs = () => {
 return (
    <>
      <title>Learn more about our company</title>
      <meta name="AboutUs" description="You can find us on ..." />
      // content
    </>
  );
}

React 19 verfügt über eine Reihe von neuen Hooks, von denen einige neu sind, andere eine Verbesserung bestehender Hooks darstellen. Lassen Sie uns weiter unten darüber diskutieren.

Der use()-Hook: Der use-Hook ist eine experimentelle API, die direkt verwendet werden kann, um den Wert eines Promises oder Kontexts innerhalb einer Komponente oder eines Hooks zu lesen (was derzeit die einzige bekannte Einschränkung darstellt). ).
Der use-Hook ist sehr vielseitig und kann auch anstelle von useEffect verwendet werden, da er zum asynchronen Datenabruf verwendet werden kann. Das hilft
Erzielen Sie einen übersichtlicheren und prägnanteren Codeblock.

Vorbehalt: Es ist kein Ersatz für useEffect, da es immer noch seine eigenen Einschränkungen hat, die _useEffect _ohne Einschränkungen ausführen wird.

import {use} from "react"
const fetchData = async () => {
    const response = await fetch("https://........");
    return response.json()
}

const userData = () => {
    const user = use(fetchData());

        return (
    <div className='username'>{user.name}</div>
  );
}

useActionState(): Dies ist ein neuer Hook, der bei der Verwaltung von Statusänderungen hilft. Es hilft bei der Verwaltung des ausstehenden Status, der Fehlerbehandlung und der Endgültigkeit
Zustandsaktualisierungen. Der useActionState _funktioniert wie der _useReduce _insofern, als er zwei (2) Parameter empfängt: die Funktion, die beim Absenden des Formulars aufgerufen werden soll, und einen _initialState und ein Array mit drei (3) Werten zurückgibt: den state, der jetzt der aktuelle Status ist, wenn es zu einer Statusmutation kommt, eine neue Aktion (formAction), die als Requisite in unserer Formularkomponente übergeben werden kann, um die Serveraktion aufzurufen, und _isPending _, das einen _boolean _value zurückgibt, wenn oder nicht Formular wurde eingereicht.

import { useActionState } from "react";

async function incrementFunction(initialState, formData) {
  return initialState + 1;
}

function StatefulForm({}) {
  const [state, formAction, isPending] = useActionState(incrementFunction, 0);

  console.log(state);

  return (
    <form>
      <button formAction={formAction}>{state}</button>
    </form>
  )
}

From this example, the incrementFunction adds 1 to the state every time the button is clicked. The initialState being 0, and then increases to 1 at the first click of the button, thereby changing the state to 1, and for every other click on the button adds 1 to the last state of the component.

useOptimistic() hook:

This is a new hook that allows users to see the outcome of their action even before the pages load completely. The pages are optimistically rendered to the user even when the server is still in its data fetching mode.

With the hope that data fetching will be successful, React displays the intended result to the client, and when data fetching fails, React reverts to the value of the previous state in order not to display incorrect data. This singular action helps in a seamless and fast display of data thereby improving user experience.

useFormStatus():

As the name implies, useFormStatus gives us the status of our form or form fields. This hook does not take in any parameter, but it sure returns 4 objects:

pending: This returns a boolean value: true or false. It returns true when the form is submitting, and false when the form is submitted.

data: When the form is successfully submitted, we can get the information of the user or object from the form field like this:

(formData.get("name"))
(formData.get("address"))

method: The default method of a form is GET, unless stated otherwise. We can get the method of our form with .method. When we are submitting a form, a string method property should be specified as a POST.

action: This is a reference to the function that will be passed to the action prop in our element.

The useFormStatus must always be called from a element or a component that is rendered inside a .

There's quite a few more updates that I can't really write about, so you don't get bored having to read so much. You can click on the React Docs Website to check out some of the other updates.

I hope you had a great time learning with me.

Do well to follow me if you enjoyed my articles.

Thanks, and have a great week ahead my friends.

Das obige ist der detaillierte Inhalt vonReagieren Sie auf die neuen Updates. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!