Reagieren Haken: Die tiefen Schnitte

Hooks sind wiederverwendbare Funktionen, mit denen Sie Status und andere Funktionen (wie Lebenszyklusmethoden usw.) verwenden können, ohne Klassen zu schreiben. Mit den Hakenfunktionen können wir den React -Status -Lebenszyklus unter Verwendung von Funktionskomponenten "anhängen", sodass wir den Status der Funktionskomponente manipulieren können, ohne sie in eine Klassenkomponente zu konvertieren.

React hat Hooks in Version 16.8 eingeführt und seitdem mehr Haken hinzugefügt. Einige Haken werden häufiger verwendet und beliebt als andere, wie beispielsweise useEffect , useState und useContext . Wenn Sie React verwenden, müssen Sie diese Haken verwendet haben.

Aber was mich interessiert, sind die wenig bekannten React-Hooks. Während alle React-Hooks ihre eigenen Funktionen haben, möchte ich Ihnen wirklich fünf Hooks zeigen, da sie möglicherweise nicht in Ihrem täglichen Job erscheinen-oder vielleicht wissen, dass sie Ihnen einige zusätzliche Superkräfte geben.

Inhaltsverzeichnis

• useReducer
• useRef
• useImperativeHandle
• useMemo
• useCallback
• Zusammenfassen

useReducer

useReducer Hook ist ein Statusmanagement -Tool, das anderen Hooks ähnelt. Insbesondere ist es eine Alternative zum useState -Hook.

Wenn Sie useReducer -Hook verwenden, um zwei oder mehr Zustände (oder Aktionen) zu ändern, müssen Sie sie nicht separat bedienen. Der Haken verfolgt alle Staaten und verwaltet sie gemeinsam. Mit anderen Worten: Es verwaltet und rensiver staatliche Änderungen. Im Gegensatz zu useState Hook ist useReducer im Umgang mit vielen Staaten in komplexen Projekten einfacher.

Szenarien verwenden

useReducer kann dazu beitragen, die Komplexität des Umgangs mehrerer Zustände zu verringern. Es kann verwendet werden, wenn Sie mehrere Zustände gemeinsam verfolgen müssen, da Sie das staatliche Management und die Logik von Komponenten als separate Bedenken behandeln müssen.

Grammatik

useReducer akzeptiert drei Parameter, von denen eines optional ist:

• Eine Reduzierfunktion
• InitialState
• Eine Init -Funktion (optional)

 const [Zustand, Versand] = Userducer (Reduzierer, Initialstate)
const [Zustand, Versand] = Usereducer (Reduzierer, Initialstate, Initfunction) // Initialisierung mit einem optionalen dritten Parameter

Beispiel

Das folgende Beispiel ist eine Schnittstelle, die Texteingaben, Zähler und Schaltflächen enthält. Das Interagieren mit jedem Element aktualisiert den Status. Beachten Sie, dass useReducer es uns ermöglicht, mehrere Fälle gleichzeitig zu definieren, anstatt sie separat einzustellen.

 Import {Usereducer} aus 'React';
const reduzierer = (Zustand, Aktion) => {
  Switch (action.type) {
    Fall "Inkrement":
      return {... state, count: state.count 1};
    Fall "Dekrement":
      return {... state, count: state.count - 1};
    Fall 'user_input':
      return {... Status, userInput: action.payload};
    Fall 'Toggle_Color':
      return {... State, Farbe:! State.Color};
    Standard:
      Neuen Fehler () werfen;
  }
}

Funktion App () {
  const [Zustand, Versand] = Usereducer (Reduzierer, {Count: 0, UserInput: '', Farbe: False})

  Zurückkehren (
    <main classname="App App-header" style="{{" backgroundcolor: state.color :>
      <input type="text" onchange="{(e)"> Dispatch ({type: 'user_input', payload: e.target.value})} />
      <br><br><p style="{{" margin:>{state.count}</p>
      <button onclick="{()"> Versand ({Typ: 'Decrement'})}>-</button>
      <button onclick="{()"> Versand ({Typ: 'Increment'})}></button>
      <button onclick="{()"> Versand ({Typ: 'Toggle_Color'})}> Farbe</button>
      <br><br><p style="{{" margin:>{state.userinput}</p>
    </main>
  );
}
Standard -Standard -App exportieren;

Aus dem obigen Code können Sie feststellen, dass wir in der Lage sind, mehrere Zustände im reducer (Switch-Case) problemlos zu verwalten, was die Vorteile von useReducer demonstriert. Dies ist die Leistung, die sie bei der Arbeit in komplexen Anwendungen mit mehreren Zuständen bietet.

useRef

useRef Hook wird verwendet, um Referenzen auf Elemente zu erstellen, um auf das DOM zuzugreifen. Aber nicht nur das, es gibt ein Objekt mit einer .current zurück, die während der gesamten Lebensdauer der Komponente verwendet werden kann, sodass Daten bestehen bleiben können, ohne eine erneute Renderung zu verursachen. Daher bleibt useRef Wert zwischen Rendern unverändert.

Szenarien verwenden

Wenn du willst:

• Betreiben Sie das DOM mithilfe gespeicherter Variableninformationen.
• Zugriff auf Informationen in untergeordneten Komponenten (Nackenelemente).
• Fokus auf das Element.

useRef -Haken kann verwendet werden. Es ist am nützlichsten, wenn Sie variable Daten in Ihrer Anwendung speichern, ohne eine erneute Renderung zu verursachen.

Grammatik

useRef akzeptiert nur einen Parameter, dh den Anfangswert .

 const newRefcomponent = usseref (initialValue);

Beispiel

Hier habe ich useRef und useState Hook verwendet, um anzuzeigen, wie oft die Anwendung den Aktualisierungsstatus bei der Eingabe von Texteingaben erneut veranlasst.

 importieren './app.css' '

Funktion App () {
  const [AnyInput, setAnyInput] = usustate ("");
  const showrender = useref (0);
  const randomInput = useref (null);

  const toggEchange = (e) => {
    setAnyInput (e.target.Value);
    Showrender.Current;
  }
  const focusrandominput = () => {
    if (randomInput.current) {// add urty urty urty, um null referenzfehler randomInput.current.focus () zu verhindern;
    }
  }

  Zurückkehren (
    <div classname="App">
      <h3>Anzahl der Renders: {Showrender.Current}</h3>
      <input type="text" ref="{randomInput}" onchange="{toggleChange}">
      <button onclick="{focusRandomInput}">Klicken Sie hier, um sich auf die Eingabe zu konzentrieren</button>
    </div>
  );
}

Standard -Standard -App exportieren;

Beachten Sie, dass das Eingeben jedes Zeichens im Textfeld den Status der Anwendung aktualisiert wird, jedoch nicht einen vollständigen Neurender auslöst.

useImperativeHandle

Wissen Sie, wie untergeordnete Komponenten auf die Funktionalität zugreifen, die von übergeordneten Komponenten an sie übergeben wurde? Elternkomponenten übergeben diese Funktionen durch Requisiten, aber diese Art von Pass ist in einem Sinne "Einweg", da die übergeordnete Komponente keine Funktionen in der untergeordneten Komponente aufrufen kann.

Anschließend können useImperativeHandle auf Funktionen von Kindern zugreifen.

Wie funktioniert das?

• Definieren Sie eine Funktion in einer untergeordneten Komponente.
• Fügen Sie der übergeordneten Komponente einen Ref hinzu.
• Wir verwenden forwardRef , wodurch der definierte REF an Kinderkomponenten weitergegeben werden kann.
• useImperativeHandle enthält Funktionen von untergeordneten Komponenten durch Ref.

Szenarien verwenden

useImperativeHandle funktioniert gut, wenn die übergeordnete Komponente durch Änderungen der untergeordneten Komponente beeinträchtigt werden soll. Fälle wie das Ändern des Fokus, das Erhöhen und Abnehmen und verwischende Elemente können also Fälle sein, in denen Sie diesen Haken verwenden müssen, um die übergeordnete Komponente entsprechend zu aktualisieren.

Grammatik

 Anwendungshandel (Ref, CreateHandle, [Abhängigkeiten])

Beispiel

In diesem Beispiel haben wir zwei Schaltflächen, eine in der übergeordneten Komponente und eine in der untergeordneten Komponente. Durch Klicken auf die übergeordnete Schaltfläche können wir Daten von der untergeordneten Komponente abrufen, sodass wir die übergeordnete Komponente manipulieren können. Es ist eingerichtet, dass das Klicken auf die untergeordnete Schaltfläche nichts von der übergeordneten Komponente an die untergeordnete Komponente übergibt, um zu veranschaulichen, wie wir den Inhalt in die entgegengesetzte Richtung übergeben.

 // übergeordnete Komponente
reag import, {useref} aus "react";
Kinderkomponent aus "./ChildComponent" importieren;
import './app.css';

Funktion parentComponent () {
  const kontrollref = useref (null);
  Zurückkehren (
    <div>
      <button onclick="{()"> {
        if (controlref.current) {
          controlref.current.controlprint ();
        }
      }}> Übergeordnete Box</button>
      <childcomponent ref="{controlRef}"></childcomponent>
    </div>
  );
}
Ausfassungsverwaltungsdarsteller übergeordnetes ParentComponent;

 // Kinderkomponente
React, {ForwardRef, Anwendungshandle, Usestate} aus "React";

const ChildComponent = ForwardRef ((Props, Ref) => {
  const [print, setPrint] = usustate (false);
  Anwendungseingangshandle (ref, () => ({{
    ControlPrint () {
      setPrint (! print);
    },
  }));

  Zurückkehren (
    <div>
      <button>Kinderbox</button>
      {print &&<p> Ich komme aus der Kinderkomponente</p> }
    </div>
  );
});

Ausfassungsverhältnis von Child Component;

Ausgabe

... (Beispielausgabe -Screenshot oder Beschreibung sollte hier enthalten sein)

useMemo

useMemo ist eines der am wenigsten verwendeten, aber interessantesten React -Haken. Es verbessert die Leistung und verringert die Latenz, insbesondere bei großem Computer in Anwendungen. Wie könnte das passieren? useMemo Hook verhindert, dass reagieren, dass der Wert jedes Mal neu berechnet wird, wenn der Zustand der Komponente aktualisiert wird und die Komponente erneut gerendert wird.

Sie werden sehen, dass die Funktion auf staatliche Änderungen reagiert. useMemo Hook akzeptiert eine Funktion und gibt den Rückgabewert der Funktion zurück . Es zwischen dem Wert, um zu verhindern, dass zusätzliche Arbeiten ausgegeben werden, um ihn erneut zu rendern, und dann zurückgibt, wenn sich eine der Abhängigkeiten ändert.

Dieser Prozess wird als Auswendiglernen bezeichnet und hilft, die Leistung zu verbessern, indem sich der zuvor angeforderte Wert erinnert, damit er erneut verwendet werden kann, ohne alle diese Berechnungen zu wiederholen.

Szenarien verwenden

Der beste Anwendungsfall ist jederzeit, wenn Sie mit starken Berechnungen zu tun haben, die Sie diesen Wert speichern und in nachfolgenden Zustandsänderungen verwenden möchten. Es kann einen schönen Leistungsschub bringen, aber Überbeanspruchung kann den genauen gegenteiligen Effekt haben und so den Speicher der Anwendung in Anspruch nehmen.

Grammatik

 Usememo (() => {
  // Code hier}, [])

Beispiel

Wenn auf die Schaltfläche angeklickt wird, gibt dieses Mini -Programm an, ob die Nummer eine gleichmäßige oder eine ungerade Zahl ist, und dreht sich dann um den Wert. Ich habe der Schleife viele Nullen hinzugefügt, um die Rechenleistung zu erhöhen. Es gibt den Wert in Sekunden zurück und funktioniert aufgrund useMemo -Hooks immer noch gut.

 // Usememo.js
React, {Usestate, Usememo} aus 'React' '

Funktion Memo () {
  const [memoone, setMemoone] = usustate (0);
  const IncrementmemoOne = () => {setMemoone (memoone 1)}
  const iseven = Usememo (() => {
    sei i = 0;
    while (i  {
    sei i = 0;
    while (i 
      <h1>{memoone}</h1>
      <button onclick="{incrementMemoOne}">Inkrement</button>
      <p>Ist ausgeglichen: {iseen? 'Ja': 'Nein'}</p>
      <p>Quadratnummer: {SquaredNumber}</p>
    
  );
}

Ausfassungsausfall Memo;

Ausgabe

... (Beispielausgabe -Screenshot oder Beschreibung sollte hier enthalten sein)

useMemo ist ein bisschen wie useCallback -Hook, aber der Unterschied besteht darin, dass useMemo gemerkte Werte von einer Funktion speichern kann, während useCallback die Funktion selbst speichert und zurückgibt.

useCallback

useCallback Hook ist ein weiterer interessanter Haken, der vorherige Abschnitt ist ein Spoiler seiner Funktionen.

Wie wir gerade gesehen haben, funktioniert useCallback ähnlich wie bei useMemo -Hooks, da sie alle Speicher verwenden, um bestimmte Inhalte für die spätere Verwendung zu speichern. useMemo speichert die Berechnung der Funktion als zwischengespeichertem Wert, während useCallback die Funktion speichert und zurückgibt.

Szenarien verwenden

Wie useMemo ist useCallback eine gute Leistungsoptimierung, da sie auswendig gelernte Rückrufe und Abhängigkeiten ohne Wiederaufnahme gespeichert und zurückgegeben wird.

Grammatik

 const GetMemoizedCallback = UseCallback (
  () => {dosomething ()}, []
);

Beispiel

 reag import, {usecallback, uswestate} aus "react";
CallbackChild von "./USECALLBACK-Child" importieren;
Import "./app.css"

Exportieren Sie Standardfunktionsfunktion app () {
  const [Toggle, shatoggle] = useSestate (falsch);
  const [data, setData] = usustate ("Ich bin eine Daten, die sich dank der UseCallback bei jedem Render nicht ändern würde");
  const returnfunction = usecallback (
    (Name) => {Datenname zurückgeben;
  );
  Zurückkehren (
    <div>
      <button onclick="{()"> {
        Settoggle (! Toggle);
      }}>
        {/ * Klicken Sie, um zu wechseln */}
      </button>
      {Toggle &&<h1> Wenn Sie mich umschalten, beeinflusst mich keine Funktion mehr</h1> }
      <callbackchild returnfunction="{returnFunction}"></callbackchild>
    </div>
  );
}

// Unterkomponenten

 reag import, {useEffect} aus "react";

Funktion CallbackChild ({returnFunction}) {
  useEffect (() => {
    console.log ("Funktion wurde genannt");
  }, [returnFunction]);
  Zurückkehren<p> {returnfunction ("Hook!")}</p> ;
}
Standard -CallbackChild exportieren;

Ausgabe

... (Beispielausgabe -Screenshot oder Beschreibung sollte hier enthalten sein)

Zusammenfassen

Das war's! Wir haben uns nur fünf sehr praktische React -Hooks angesehen, die meiner Meinung nach oft übersehen werden. Wie viele solcher Bewertungen berühren wir nur die Oberfläche dieser Haken. Sie haben jeweils ihre eigenen Feinheiten und Vorsichtsmaßnahmen, die bei der Verwendung berücksichtigt werden müssen. Aber hoffentlich haben Sie ein gutes fortgeschrittenes Konzept für das, was sie sind und wenn sie besser geeignet sind als andere Haken, die Sie möglicherweise öfter verwenden.

Der beste Weg, sie vollständig zu verstehen, ist das Üben. Daher ermutige ich Sie, diese Haken in Ihrer App zu verwenden, um sie besser zu verstehen. Dazu können Sie mehr darüber erfahren, indem Sie sich die folgenden Ressourcen ansehen:

 <code>- Intro to React Hooks (Kingsley Silas) - Hooks at a Glance (React documentation) - Hooks Cheatsheet (Ohans Emmanuel) - The Circle of a React Lifecycle (Kingsley Silas) - Hooks of React Router (Agney Menon) - Testing React Hooks With Enzyme and React Testing Library (Kingsley Silas)</code>

Das obige ist der detaillierte Inhalt vonReagieren Haken: Die tiefen Schnitte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!