Reagieren Haken: Die tiefen Schnitte

React hat Hooks in Version 16.8 eingeführt und seitdem mehr Haken hinzugefügt. Einige Hooks werden häufiger verwendet und beliebt als andere, wie 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.

Catalog

• useReducer
• useRef
• useImperativeHandle
• useMemo
• useCallback
• Summary

useReducer

useReducer Hook is a status management tool similar to other Hooks. Insbesondere ist es eine Alternative zum usustate Hook.

Wenn Sie den -Serlebner -Haken 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 zum usustate Hook ist Usereducer beim Umgang mit vielen Zuständen in komplexen Projekten einfacher.

Verwendungsszenario

Usereducer kann dazu beitragen, die Komplexität der Handhabung 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.

Syntax

useReducer accepts three parameters, one of which is optional:

• A reducer function
• initialState
• an init function (optional)

const [state, dispatch] = useReducer(reducer, initialState) const [state, dispatch] = useReducer(reducer, initialState, initFunction) // Initialization using an optional third parameter

Example

The following example is an interface containing text input, counters, and buttons. Das Interagieren mit jedem Element aktualisiert den Status. Beachten Sie, dass Usereducer ermöglicht, mehrere Fälle gleichzeitig zu definieren, anstatt sie separat einzustellen.

 Import {Usereducer} aus 'React'; Fall 'Toggle_Color': Rückgabe {... Status, Farbe: ! color}; ) => Dispatch ({Typ: 'user_input', Nutzlast: E.Target.Value})}/& Gt; '})} & gt; <br>  <br>  <p style="{{margin:"> {state.userinput} </p> ); Dies ist die Leistung, die sie bei der Arbeit in komplexen Anwendungen mit mehreren Zuständen bietet.  <h3> <code> Useref </code> </h3> <p> <code> Useref </code> Hook wird verwendet, um Referenzen auf Elementen zu erstellen, um auf das DOM zuzugreifen. Aber nicht nur das, es wird ein Objekt mit dem Attribut <code>. Daher bleibt der Wert <code> useref </code> zwischen Rendern unverändert. </code></p> <h4> Verwendungsszenario </h4> <p> Wenn Sie möchten: </p> 

• Manipulieren Sie das DOM mit gespeicherten Variableninformationen.
• Zugriff auf Informationen in untergeordneten Komponenten (Halselemente).
• Fokus auf das Element.

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

syntax

useref akzeptiert nur einen Parameter, d. H. Anfangswert .

 const newRefComponent = useref (initialValue); 

Beispiel

Hier habe ich den useref und usestate Hook verwendet, um anzuzeigen, wie viele Male die Anwendung neu rendert.

 Import './App.css' Funktion app () {const [AnyInput, setAntUps] = usemState (""); } const focusrandominput = () = & gt; {if (randomInput.current) {// Fügen Sie ein Urteil hinzu, um Null -Referenzfehler zu verhindern. );} Standard -App; 

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

Anwendungsemperativhandle

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.

Dann können übergeordnete Komponenten Anwendungshandel ermöglicht, auf Funktionen von Kindern zuzugreifen.

Wie funktioniert das?

• Definieren Sie eine Funktion in einer untergeordneten Komponente.
• Fügen Sie in der übergeordneten Komponente einen Ref hinzu.
• Wir verwenden ForwardRef , mit dem der definierte Ref an untergeordnete Komponenten übergeben werden kann.
• Anwendungseingang Enthält Funktionen von untergeordneten Komponenten durch Ref.

Nutzungsszenario

AnwendungsHandle funktioniert gut, wenn die übergeordnete Komponente durch Änderungen in der untergeordneten Komponente beeinflusst 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.

syntax

 AnwendungsHandle (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 reagieren, {useref} aus "React"; Trolprint (); /> ); ) {setPrint (! print); Box  {print & amp; & amp; ist einer der am wenigsten häufig verwendeten, aber interessanten React -Haken. Es verbessert die Leistung und verringert die Latenz, insbesondere bei großem Computer in Anwendungen. Wie könnte das passieren? Der <code> usememo </code> Hook verhindert, dass Reaktionen den Wert jedes Mal neu berechnen, wenn der Zustand der Komponente aktualisiert und die Komponente erneut gerendert wird.  <p> Sie sehen, dass die Funktion auf Statusänderungen reagiert. <code> Usememo </code> Hook akzeptiert eine Funktion und <strong> gibt den Rückgabewert der Funktion </strong> 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. </p> <p> Dieser Prozess wird als <strong> Memorisierung </strong> bezeichnet, wodurch die Leistung verbessert wird, indem sich der zuvor angeforderte Wert erinnert, damit er erneut verwendet werden kann, ohne all diese Berechnungen zu wiederholen. </p> <h4> Nutzungsszenario </h4> <p> Der beste Anwendungsfall ist jederzeit, wenn Sie mit starken Berechnungen zu tun haben, die Sie den 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. </p> <h4> syntax </h4> <pre class="brush:php;toolbar:false"> Usememo (() = & gt; {// code hier}, []) 

Beispiel

Wenn der Taste angeklickt wird, gibt dieses Mini -Programm an, ob die Nummer eine gleichmäßige oder eine ungerade Zahl ist, und senkt dann auf 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 des Usememo -Haken immer noch gut.

 // Usememo.js Import React, {Usestate, Usememo} von 'React' Function Memo () {const [memoone, setMemoone useState (0); t; SquaredNumber = Usememo (() = & gt; {let i = 0; while (i & lt; 100000000) {i} // Die Berechnungsmenge Konsole erhöhen. > <p> ist gleichmäßig: {ISEENEEN? ); Gibt die Funktion selbst zurück. </p>  <p> </p><h3> <code> useCallback </code> </h3>  <p> <code> usecallback </code> Der Hook ist ein weiterer interessanter Haken, und der vorherige Abschnitt ist ein Spoiler seiner Funktionen. </p>  <p> </p><p> Wie wir gerade gesehen haben, funktioniert <code> usecallback </code> ähnlich wie <code> Usememo </code> Hooks, da alle den Speicher für spätere Verwendung bestimmte Inhalte zwischenspeichern. <code> Usememo </code> speichert die Berechnung der Funktion als Zwischenwert, während <code> useCallback </code> speichert und die Funktion zurückgibt. </p>  <p> </p><h4> Verwendungsszenario </h4>  <p> </p><p> Like <code> Usememo </code>, <code> usecallback </code> ist eine gute Leistungsoptimierung, da es ohne Wiederanlagen gespeichert und zurückgegeben wird. </p>  <p> </p><h4> syntax </h4>  <pre class="brush:php;toolbar:false"> const getMemoizedCallback = usecallback (() = & gt; {dosomething ()}, []); AllBack-Child "; importieren" ./app.css "exportieren Standardfunktion app () {const [Toggle, settoggle] = usustate (false); const [Daten, setData] = usestate ("Ich bin eine Daten, die bei jedem Render nicht geändert wird, dank der UseCallback"); & amp; & amp; <callbackchild returnfunction="{returnFunction}/"> ); p> {returnFunction ("Hook!")} ; <p> ... (Beispiel oder Beschreibung des Beispielausgangs sollte hier enthalten sein) </p> <p> </p>
<h3> Zusammenfassung </h3>  <p> </p>
<p> Das ist es! 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. </p>  <p> </p>
<p> Der beste Weg, um sie vollständig zu verstehen, ist die Übung. Daher ermutige ich Sie, diese Haken in Ihrer App zu verwenden, um sie besser zu verstehen. To do this, you can learn more about it by looking at the following resources: </p> <pre class="brush:php;toolbar:false"><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!