Reaktions-Hooks – Effekt-Hooks

Was sind Haken?

Hooks sind syntaktisch gesehen Funktionen. Diese Funktionen können verwendet werden, um Zustandsverwaltungs- und Lebenszyklusmethoden in Funktionskomponenten einzuführen.

Vorteile von React Hooks

1. Prägnant
   Grammatisch gesehen wird weniger Code geschrieben
2. Der Einstieg ist ganz einfach
   • Basierend auf dem Konzept der funktionalen Programmierung müssen Sie lediglich einige Grundkenntnisse in JavaScript beherrschen
   • Es ist nicht erforderlich, Kenntnisse im Zusammenhang mit dem Lebenszyklus zu erlernen. React Hooks verwendet ein neues Konzept, um den Betriebsprozess von Komponenten zu verwalten.
   • Es besteht keine Notwendigkeit, HOC-bezogenes Wissen zu erlernen. React Hooks kann die Probleme, die HOC lösen möchte, perfekt lösen und ist zuverlässiger.
   • Mobx ersetzt Redux für die Zustandsverwaltung
3. Bessere Wiederverwendbarkeit des Codes
4. Einfachere Integration mit Typescript

Nachteile von React Hooks

1. Der Status ist nicht synchron
   Der Status, auf den in der asynchronen Betriebsfunktion zugegriffen wird, ist immer noch der Wert des ursprünglichen Status
2. useEffect-Abhängigkeitsproblem
   Wenn useEffect von mehr Daten abhängt, wird es häufig ausgelöst

Dinge, die Sie über React Hooks beachten sollten

1. Namenskonvention
   Benutzerdefinierte Hooks müssen mit „use“ als Präfix in der Form „useXXX“ benannt werden.
2. Rufen Sie React Hooks nur in der äußersten Ebene auf
3. Rufen Sie React-Hooks nur aus React-Funktionen auf.
   Rufen Sie Hooks in benutzerdefinierten Hooks oder Komponenten auf

useEffect:

useEffect kann auf Änderungen warten und Rückruffunktionen ausführen.

useEffect(effect,[deps])：

• Effekt: Der Effektparameter ist eine Rückruffunktion. Wenn sich die Abhängigkeiten in Deps ändern, wird der Effekt ausgelöst.

• deps: Der deps-Parameter ist ein Array, und die Elemente im Array sind die Zustände, die überwacht werden müssen.

useEffect überwacht den angegebenen Status und ruft die Rückruffunktion auf, wenn der Status aktualisiert wird. Wenn der zweite Parameter nicht übergeben wird, werden alle Zustände überwacht. Wenn Sie ein [] übergeben, bedeutet dies, dass kein Status überwacht und dieser nur einmal während der Initialisierung ausgeführt wird.

import {useEffect}from 'react'
useEffect(()=>{},[]);

Wenn die Rückruffunktion eine Funktion zurückgibt, entspricht diese Funktion der KomponenteWillUnmount des Lebenszyklus.

import {useEffect} from 'react';
useEffect(()=>{
	return ()=>{
		// 组件卸载时触发
	}
},[]);

useLayoutEffect

useLayoutEffect ist useEffect sehr ähnlich und erhält zusätzlich eine Callback-Funktion und ein Array. Die Callback-Funktion wird ausgelöst, wenn sich die Abhängigkeiten im Array ändern. Sie weisen jedoch folgende Unterschiede auf:

• useEffect wird asynchron ausgeführt, während useLayoutEffect synchron ausgeführt wird
• Die Ausführungszeit von useEffect liegt, nachdem der Browser das Rendern abgeschlossen hat, während die Ausführungszeit von useLayoutEffect liegt, bevor der Browser den Inhalt an die Schnittstelle rendert.

UseLayoutEffect muss verwendet werden, wenn die Operation in useEffect DOM verarbeiten muss und der Stil der Seite während der DOM-Verarbeitung geändert wird.

import {useLayoutEffect}from 'react'

function App(){
useLayoutEffect(()=>{
},[]);
	return <></>
}