5 Dinge, die beim Schreiben von React-Komponenten mit Hooks zu beachten sind

Hook ist eine neue Funktion, die in React16.8 hinzugefügt wurde. Obwohl in der offiziellen React-Dokumentation die relevanten Konzepte von React-Hooks erläutert werden, ist es schwierig, Hooks nur durch Lesen der offiziellen Dokumentation richtig zu verwenden. Beim Schreiben von Hooks kann man leicht in Fallen tappen und Fehler machen. Dieser Artikel fasst 5 schlechte Orte zusammen.

01. Verwenden Sie useState, wenn kein Rendern erforderlich ist

In Funktionskomponenten können wir useState zur Statusverwaltung verwenden, was die Statusverwaltung sehr einfach macht, aber auch leicht missbraucht werden kann. Schauen wir uns die leicht zu übersehenden Bereiche anhand der folgenden Codebeispiele an.

Nicht empfohlen×

Funktion ClickButton(Eigenschaften){
 const [Anzahl, Anzahl festlegen] = setzeZustand(0)
 const onClickCount = () => {
  setzeAnzahl((c) => c + 1)
 }
 const onClickRequest = () => {
  apiCall(Anzahl)
 }
 
 zurückkehren (
  <div>
   <button onClick={onClickCount}>Klick</button>
   <button onClick={onClickRequest}>Senden</button>
  </div>
 )
}

Das Problem: Bei genauer Betrachtung des obigen Codes ist auf den ersten Blick nichts falsch. Durch Klicken auf die Schaltfläche wird count aktualisiert. Aber hier liegt das Problem. Unser Rückgabeteil verwendet den count nicht, und jedes setCount führt dazu, dass die Komponente einmal neu gerendert wird, was wir nicht brauchen. Das zusätzliche Rendering verschlechtert die Seitenleistung, daher können wir den Code wie folgt ändern:

Empfohlen√
Wenn wir einfach eine Variable möchten, die während des Komponentendeklarationszyklus gespeichert werden kann, die Aktualisierung der Variable aber kein erneutes Rendern der Komponente erfordert, können wir useRef Hook verwenden.

Funktion ClickButton(Eigenschaften){
 Konstante Anzahl = useRef(0)
 const onClickCount = () => {
  Anzahl.aktuell++
 }
 const onClickRequest = () => {
  apiCall(Anzahl.aktuell)
 }

 zurückkehren (
  <div>
   <button onClick={onClickCount}>Klick</button>
   <button onClick={onClickRequest}>Senden</button>
  </div>
 )
}

02. Verwenden Sie router.push anstelle von link

In React SPA-Anwendungen verwenden wir react-router , um Routensprünge zu handhaben. Wir schreiben oft eine Schaltfläche in die Komponente und handhaben Routensprünge, indem wir auf das Schaltflächenereignis klicken, wie im folgenden Code gezeigt:

Nicht empfohlen×

Funktion ClickButton(Eigenschaften){
 const history = useHistory()
 const onClickGo = () => {
  history.push('/wo-seite')
 }
 return <button onClick={onClickGo}>Gehe dorthin</button>
}

Das Problem: Obwohl der obige Code funktioniert, erfüllt er nicht die Anforderungen an die Barrierefreiheit. Der Button wird vom Screenreader nicht als Link erkannt. Daher können wir den Code wie folgt umwandeln:

Empfohlen√

Funktion ClickButton(Eigenschaften){
 zurück <Link zu="/nächste-seite">
  <span>Gehe dorthin</span>
 </Link>
}

03. Aktionen mit useEffect behandeln

Manchmal möchten wir einfach zusätzlichen Code ausführen, nachdem React das DOM aktualisiert hat. Beispielsweise das Senden von Netzwerkanforderungen, das manuelle Ändern von DOM und das Aufzeichnen von Protokollen.

Nicht empfohlen×

Funktion DataList({ bei Erfolg }) {
 const [wird geladen, wird gesetzt] = useState(false);
 const [Fehler, setzeFehler] = useState(null);
 const [Daten, setData] = useState(null);

 const fetchData = () => {
  setzeLaden(true);
  callApi()
   .then((res) => setzeDaten(res))
   .catch((err) => setError(err))
   .finally(() => setLoading(false));
 };

 useEffect(() => {
  fetchData();
 }, []);

 useEffect(() => {
  wenn (!laden && !fehler && daten) {
   bei Erfolg();
  }
 }, [laden, Fehler, Daten, bei Erfolg]);

 return <div>Daten: {data}</div>;
}

Das Problem: Der obige Code verwendet zwei useEffect , der erste wird zum Anfordern asynchroner Daten und der zweite zum Aufrufen der Rückruffunktion verwendet. Die Ausführung des zweiten useEffect wird nur ausgelöst, wenn die erste asynchrone Anforderung erfolgreich ist. Wir können jedoch nicht vollständig garantieren, dass die Abhängigkeiten des zweiten useEffect vollständig durch die erfolgreichen Anforderungsdaten des ersten useEffect gesteuert werden. Daher können wir den Code wie folgt umwandeln:

Empfohlen√

Funktion DataList({ bei Erfolg }) {
 const [wird geladen, wird gesetzt] = useState(false);
 const [Fehler, setzeFehler] = useState(null);
 const [Daten, setData] = useState(null);

 const fetchData = () => {
  setzeLaden(true);
  callApi()
   .then((res) => {
    setData(res)
    bei Erfolg()
    })
   .catch((err) => setError(err))
   .finally(() => setLoading(false));
 };

 useEffect(() => {
  fetchData();
 }, []);
 return <div>Daten: {data}</div>;
}

04. Einzelverantwortungskomponente

Wann sollten Sie eine Komponente in mehrere kleinere Komponenten aufteilen? Wie erstelle ich einen Komponentenbaum? All diese Probleme treten bei der Verwendung komponentenbasierter Frameworks täglich auf. Ein häufiger Fehler beim Entwurf von Komponenten besteht jedoch darin, zwei Anwendungsfälle in einer Komponente zu kombinieren.

Nicht empfohlen×

Funktion Header({ Menüelemente }) {
 zurückkehren (
  <Kopfzeile>
   <HeaderInner menuItems={menuItems} />
  </header>
 );
}

Funktion HeaderInner({ Menüelemente }) {
 return isMobile() ? <BurgerButton menuItems={menuItems} /> : <Tabs tabData={menuItems} />;
}

Das Problem: Bei diesem Ansatz versucht die HeaderInner Komponente, zwei verschiedene Dinge gleichzeitig zu sein. Mehr als eine Sache gleichzeitig zu tun ist nicht ideal. Darüber hinaus wird es schwieriger, die Komponente an anderer Stelle zu testen oder wiederzuverwenden. Daher können wir den Code wie folgt umwandeln:

Empfohlen√

Durch das Verschieben der Bedingung um eine Ebene nach oben wird der Zweck der Komponenten leichter erkennbar und man erkennt leichter, dass sie nur eine Verantwortung haben, nämlich entweder <Tabs/> oder <BurgerButton/> zu sein, anstatt zu versuchen, zwei verschiedene Dinge gleichzeitig zu sein.

Funktion Header(Eigenschaften) {
 zurückkehren (
  <Kopfzeile>
   {isMobile() ? <BurgerButton menuItems={menuItems} /> : <Tabs tabData={menuItems} />}
  </header>
 )
}

05. Einzelverantwortung useEffects

Durch den Vergleich componentWillReceiveProps oder componentDidUpdate wurde mir die Schönheit von userEffect bewusst. Bei unsachgemäßer Verwendung von useEffect können jedoch Probleme auftreten.

Nicht empfohlen×

Funktion Beispiel (Requisiten) {
 const location = useLocation();
 const fetchData = () => {
  /* Aufruf der API */
 };

 const updateBreadcrumbs = () => {
  /* Aktualisieren der Breadcrumbs */
 };

 useEffect(() => {
  fetchData();
  aktualisiere Breadcrumbs();
 }, [Standort.Pfadname]);

 zurückkehren (
  <div>
   <BreadCrumbs />
  </div>
 );
}

Das Problem: useEffect löst zwei Nebeneffekte gleichzeitig aus, aber nicht alle davon sind die Nebeneffekte, die wir brauchen. Daher können wir den Code wie folgt ändern:

Empfohlen√

Trennen Sie zwei Nebeneffekte von einem UseEffect.

Funktion Beispiel(Requisiten) {
 const location = useLocation();

 const fetchData = () => {
  /* Aufruf der API */
 };

 const updateBreadcrumbs = () => {
  /* Aktualisieren der Breadcrumbs */
 };

 useEffect(() => {
  fetchData();
  aktualisiere Breadcrumbs();
 }, [Standort.Pfadname]);

 zurückkehren (
  <div>
   <BreadCrumbs />
  </div>
 );
}

siehe:

Fünf häufige Fehler beim Schreiben von React-Komponenten (mit Hooks) im Jahr 2020

Oben sind die Details der fünf Dinge, auf die Sie achten müssen, wenn Sie Hooks zum Schreiben von React-Komponenten verwenden. Weitere Informationen zu Hooks zum Schreiben von React-Komponenten finden Sie in anderen verwandten Artikeln auf 123WORDPRESS.COM!