React Hooks geben uns die useState-Option, und ich sehe immer Vergleiche zwischen Hooks und Class-State. Aber was ist mit Hooks und einigen regulären Variablen?
Zum Beispiel,
function Foo() {
let a = 0;
a = 1;
return <div>{a}</div>;
}
Ich habe keine Hooks verwendet und es werden die gleichen Ergebnisse erzielt wie:
function Foo() {
const [a, setA] = useState(0);
if (a != 1) setA(1); // to avoid infinite-loop
return <div>{a}</div>;
}
Was ist der Unterschied? Die Verwendung von Hooks ist in diesem Fall noch komplexer ... Warum also anfangen?
javascript
node.js
reactjs
react-hooks
Moshe Nagar
quelle
quelle
let a = 1; return <div>{a}</div>
und Sie erhalten das gleiche Ergebnis.Antworten:
Der Grund ist, wenn Sie
useState
die Ansicht erneut rendern. Variablen selbst ändern nur die Bits im Speicher und der Status Ihrer App kann nicht mehr mit der Ansicht synchronisiert werden.Vergleichen Sie diese Beispiele:
In beiden Fällen
a
ändert sichuseState
dera
aktuelle Wert beim Klicken, aber nur, wenn Sie die Ansicht korrekt verwenden .quelle
a
nach Abschluss der Ausführung als Müll gesammelt wird, während im ersten FalluseState
der Wert vona
useRef
wenn er die Ansicht nicht erneut rendern wollte. Es bleibt die Frage, ob er lokale Variablen oder React-Referenzen verwenden soll. Wenn Sie beispielsweise eine Zeitüberschreitung haben, die Sie löschen müssen, oder eine laufende http-Anfrage mit Axios, speichern Sie die Zeitüberschreitung oder die Axios-Quelle in einer Variablen oder in einer React-Referenz?useRef
(wenn Sie kein erneutes Rendern möchten) oderuseState
(wenn Sie erneut rendern möchten). Im Falle von Timern sollten sie, da sie Nebenwirkungen sind, imuseEffect
Haken gestartet werden . Wenn Sie möchten ,timerId
nur für die Bereinigung Zwecke, können Sie es in halten Handler ‚s lokale Variable. Wenn Sie den Timer von einer anderen Stelle in der Komponente löschen möchten, sollten Sie verwendenuseRef
. Das SpeicherntimerId
in der lokalen Variablen einer Komponente wäre ein Fehler, da lokale Variablen bei jedem Rendern "zurückgesetzt" werden.Durch das Aktualisieren des Status wird die Komponente erneut gerendert, lokale Werte jedoch nicht.
In Ihrem Fall haben Sie diesen Wert in Ihrer Komponente gerendert. Das heißt, wenn der Wert geändert wird, sollte die Komponente neu gerendert werden, um den aktualisierten Wert anzuzeigen.
Es ist also besser zu verwenden
useState
als der normale lokale Wert.quelle
Ihr erstes Beispiel funktioniert nur, weil sich die Daten im Wesentlichen nie ändern. Der
setState
Eingabepunkt für die Verwendung ist das erneute Rendern Ihrer gesamten Komponente, wenn sich der Status ändert. Wenn für Ihr Beispiel eine Statusänderung oder -verwaltung erforderlich ist, werden Sie schnell feststellen, dass Änderungswerte erforderlich sind. Um die Ansicht mit dem Variablenwert zu aktualisieren, benötigen Sie den Status und das erneute Rendern.quelle
ist äquivalent zu
Was
useState
zurückkommt, sind zwei Dinge:Wenn Sie anrufen, rufen
setA(1)
Sie anthis.setState({ a: 1 })
und lösen ein erneutes Rendern aus.quelle
Lokale Variablen werden bei jeder Mutation bei jeder Mutation zurückgesetzt, während der Status aktualisiert wird:
quelle