In diesem Artikel werde ich versuchen, die m\u00f6glichen Best Practices vorzustellen, die mit React Hooks machbar sind , um React Hooks als Entwickler in zuk\u00fcnftigen Projekten besser verwenden zu k\u00f6nnen.<\/p>\n
Hierzu ist ein Grundverst\u00e4ndnis<\/strong> in reactJs<\/strong> erforderlich.<\/p>\n React ab V16.8 enth\u00e4lt Hooks und erm\u00f6glicht das Verwalten von Status- und anderen React-Funktionen, ohne das eine Klasse erforderlich ist.<\/p>\n K\u00f6nnen wir nicht einfach weiterhin Klassen verwenden? Ja, geht zweifelsohne, allerdings sollte es wohl\u00fcberlegt sein,denn mit Functional Components geht einiges besser:<\/p>\n React bietet Entwicklern bereits vordefinierte, integrierte Hooks<\/strong> wie useState<\/strong>, useEffect<\/strong>, useContext<\/strong> … und bietet zus\u00e4tzlich die M\u00f6glichkeit auch eigene Hooks zu erstellen (dazu sp\u00e4ter mehr in einem separaten Artikel) .<\/p>\n Zun\u00e4chst einige Beispiele, die sich auf useState<\/strong> und useEffect<\/strong> Hooks konzentrieren. Die gleichen Regeln sind auch auf die anderen Hooks anwendbar.<\/p>\n Der obige Code zeigt die Verwendung von useState Hooks. Im Beispiel handelt es sich um eine einfache Komponente, mit der der Benutzer eine Zahl (Counter) erh\u00f6hen kann, wenn das Klickereignis ausgel\u00f6st wird. Ohne Verwendung von Hooks k\u00f6nnten wir etwas \u00c4hnliches schreiben (mittels class-based-components, siehe den folgenden Code), um die Werte zu initialisieren dient dann der Konstruktor innerhalb der Klasse:<\/p>\n Wenn der useState-Hook verwendet wird, ist die Initialisierung in functional Components wie folgt machbar:<\/p>\n Das Klickereignis hat die useState-Funktion ausgel\u00f6st, die den Counter erh\u00f6ht.<\/p>\n Das gleiche Problem k\u00f6nnte gel\u00f6st werden, wenn wir Klassen verwenden, allerdings dann mit mehr Code. Die Verwendung von Hooks kann allerdings auch zu Komplexit\u00e4t f\u00fchren.<\/p>\n Ziel dieses Artikels ist es, zu zeigen, dass mit wenigen Schritten komplexe Apps erstellt und deren Komplexit\u00e4t mithilfe von Hooks? verwaltet werden k\u00f6nnen.<\/p>\n Nun wollen wir sehen, wie wir dieses Ziel erreichen k\u00f6nnen.<\/p>\n Basierend auf der React-Doku zu Hooks<\/a> sind nur einige wenige Regeln zu befolgen, um mit dem Schreiben von Hooks-basierten Apps beginnen zu k\u00f6nnen.<\/p>\n Zum Wo<\/strong> sind folgende Regeln wichtig. Hooks werden niemals aufgerufen in:<\/p>\n Jetzt haben wir gelernt, wo wir Hooks nicht<\/strong> aufrufen d\u00fcrfen. Die Verwendung von React-Hooks unter Beachtung der React-Regeln sollte dann zB ungef\u00e4hr so aussehen:<\/p>\n F\u00fcr die diejenigen, die mehr wissen m\u00f6chten, zB warum die Reihenfolge so wichtig ist und was sich hinter den Kulissen so tut, und auch mehr \u00fcber verkn\u00fcpfte Listen und Datenstrukturen wissen m\u00f6chten,gibt es hier eine gute und weiterf\u00fchrende Erl\u00e4uterung.<\/a><\/p>\n React- Funktionskomponenten und Javascript-Funktionen sind nicht<\/strong> dasselbe. Das Aufrufen von Hooks innerhalb einer js-Funktion ist nicht m\u00f6glich. Funktionale React-Komponenten akzeptieren props als Argumente und geben JSX zur\u00fcck, selbst wenn sie denselben body und dieselbe Struktur wie eine einfache Javascript-Funktion haben. ?\u200d\u2640\ufe0f<\/p>\n Der useState Hook ist hier unbrauchbar, da es sich nicht um eine React- Funktions-Komponente handelt.<\/p>\n Benutzerdefinierte Hooks sind eine neue Methode, womit die Flexibilit\u00e4t geboten wird, Logik zu teilen, was in React-Komponenten zuvor nicht m\u00f6glich war. Es kann verwendet werden, um viele Anwendungsf\u00e4lle wie das Abrufen von Daten, komplexe Animationen, deklarative Abonnements, Timer usw. abzudecken.<\/p>\n Benutzerdefinierte Hooks bedeuten weniger Code. und weniger sich wiederholende Bl\u00f6cke.<\/strong><\/p>\n Stellen wir uns vor, wir verwenden eine Komponente, die einen sehr komplexen gro\u00dfen State verwendet. Der gleiche State wird m\u00f6glicherweise von anderen Komponenten gemeinsam genutzt. Wenn der State gr\u00f6\u00dfer wird, ist es sehr schwierig, seine logische Komplexit\u00e4t zu verwalten.<\/p>\n Die Verwendung vieler setState in der Funktionskomponente macht das Aktualisieren des State nicht zentral und einfacher. Daher kommt auch die Idee der -Reducer-\u00a0 ?, das Erstellen eines benutzerdefinierten useReducer-Hooks l\u00f6st dieses Problem f\u00fcr viele andere Komponenten.<\/p>\n Erstellen wir einen einfachen benutzerdefinierten Hook, der einen Titel anzeigt. Unser Hook befindet sich in einer separaten Datei und sieht folgenderma\u00dfen aus:<\/p>\n Wie wir sehen k\u00f6nnen, ist ein benutzerdefinierter Hook eine Funktion, die mit use beginnt und einen anderen Hook im Inneren verwenden kann ? und nat\u00fcrlich kann dieser Hook \u00fcberall angewendet werden !!\u00a0 ?<\/p>\n Vorstellbar ist zB\u00a0 einen useLocalStorageHook zu erstellen, um den lokalen Speicher zu verwalten, useValidDataHook zu verwenden, um ein Formular zu validieren … und vieles mehr! Um l\u00e4stige Konflikte beim Coding zu vermeiden, sollte ein esLint-Plugin verwendet werden, um sicherzustellen, dass alle oben genannten Regeln angewendet werden. Insbesondere wenn im Team gearbeitet wird.<\/p>\n create-react-app (CRA) enth\u00e4lt bereits das Plugin, anderenfalls kann es wie folgt installiert werden:<\/p>\n Folgende Konfiguration sollte in der esLint-Konfigurationsdatei enthalten sein, um die o.a. Regeln im Linter zu aktivieren:<\/p>\n Ich habe in diesem Artikel versucht, die wichtigsten Regeln f\u00fcr Entwickler aufzulisten, die bereit sind, im n\u00e4chsten Projekt React-Hooks zu verwenden. F\u00fcr die Verwendung von Hooks sind die folgenden Schritte zu validieren:<\/p>\n Einfachheit \u2714Warum sollten ReactHooks verwendet werden ?<\/h3>\n
\n
import React, { useState } from 'react'; \/\/ Aufruf des useState Hook\n\nconst EinfacheKomponente1 = () => { \/\/ Hooks in funktionalen Komponenten \n const [count, setCount] = useState(0) \/\/Initialisierung\n return (\n <div>\n <p>Klick Anzahl : {count}<\/p>\n <button onClick={() => setCount(count + 1)}>\n Klick mich \n <\/button>\n <\/div>\n )\n}\n\nReactDOM.render(<EinfacheKomponente1 \/>, document.getElementById('app'))<\/code><\/pre>\nthis.state = {\n count:0 \n}<\/code><\/pre>\nconst [count, setCount] = useState(0);<\/code><\/pre>\n
\nWenn wir uns vorstellen, dass die Komplexit\u00e4t der zuverwaltenden states immer gr\u00f6\u00dfer wird, wird es dann schnell un\u00fcbersichtlich ?\u200d\u2642\ufe0f<\/p>\n1. Wo Hooks verwenden und in welcher Reihenfolge ?<\/h3>\n
\u2714 Klassenkomponenten\n\u2714 Event Handler \n\u2714 Loops\n\u2714 in Funktionen, die an useMemo, useReducer, or useEffect \u00fcbergeben werden\n\u2714 in nicht-React Funktionen<\/pre>\n
if (true) { \/\/ der useEffect hook wird in Bedingung aufgerufen ?\n useEffect(myFunction() => {\n console.log('hier rendern')\n });\n}<\/code><\/pre>\n
\nDie erste Regel besteht darin, die Aufruf-Reihenfolge zu respektieren<\/strong> und Hooks stets in der obersten Ebene der Funktionskomponente<\/strong> aufzurufen. Im Klartext bedeutet dies: React muss wissen, dass Hooks immer in derselben Reihenfolge<\/strong> aufgerufen werden und nicht von Bedingungen oder Schleifen<\/strong> beim Rendern abh\u00e4ngen.<\/p>\nconst einfacheKomponente2 = () => { \n const [count, setCount] = useState(0) \u2714\n const [name, setCount] = useState('') \u2714\n useEffect(() => { \u2714\n document.title = `Du hast mich ${count} mal geklickt.`;\n });\n}<\/code><\/pre>\n2.\u00a0 React-Hooks nur innerhalb von React-Functional-Components verwenden<\/h3>\n
import { useState } = \"react\";\n\nconst sagHallo(name) => {\n const [name, setName] = useState(\"Franz\");\n return console.log(`Hallo ${name}`);\n}\ndocument.getElementById(\"root\").innerHTML = sagHallo;<\/code><\/pre>\n3. React CustomHooks – benutzerdefinierte Hooks<\/h3>\n
const useTitle= (title) => {\n useEffect(() => {\n document.title = title;\n }, [title])\n}<\/code><\/pre>\nimport React, { Component, useState } from 'react';\n import useTitle from '.\/myHooks\/usetitle'; \/\/ benutzerdefinierter Hook\n\n const Counter() => {\n const [count, setCount] = useState(0);\n const incrementCount = () => setCount(count + 1);\n useTitle (`You clicked ${count} times`);\n\n return (\n <div>\n <p>You clicked {count} times<\/p>\n <button onClick={incrementCount}>Click me<\/button>\n <\/div>\n )\n }\n\n export default Counter;<\/code><\/pre>\n
\nDamit w\u00e4re ein wesentlich sauberer und zentralisierter Code m\u00f6glich ?.<\/p>\n4. Code-Linter verwenden !<\/h3>\n
npm install eslint-plugin-react-hooks --save-dev<\/code><\/pre>\n\/\/ ESLint Konfiguration\n{\n \"plugins\": [\n \/\/ ...\n \"react-hooks\"\n ],\n \"rules\": {\n \/\/ ...\n \"react-hooks\/rules-of-hooks\": \"error\", \/\/ \u00dcberpr\u00fcft Hook-Regeln\n \"react-hooks\/exhaustive-deps\": \"warn\" \/\/ \u00dcberpr\u00fcft effects-deps.\n }\n}<\/code><\/pre>\nZusammenfassung<\/h3>\n
\nOrganisation: In dieser Reihenfolge: zuerst berechnen , dann State instantiieren, Side-Effects beachten, Ereignishandler einrichten, schlie\u00dflich rendern (). \u2714
\nCode Type-Check, weitere Infos dazu<\/a> \u2714
\nStyleguide verwenden, um Code-Einheitlichkeit und Integrit\u00e4t zu gew\u00e4hrleisten. \u2714<\/p>\n