Umgang mit Objektwerten in React useState()

Was ist useState in React?

useState ist ein React-Hook, der es Funktionskomponenten ermöglicht, den lokalen Status zu verwalten und zu aktualisieren.

Aber Sie müssen sicherstellen, dass der Status über useState() aktualisiert wird und nicht der Status selbst direkt verändert wird.

Grundlegendes Beispiel für useState

const [count, setCount] = useState(0);

setCount(count++)
console.log(count) // 1

Das Problem mit dem Objektstatus in useState

Javascript hat zwei Orte, an denen es die Daten speichern kann: Stack und Heap, und es bezieht sich auf die Geschichte der primitiven Werte und Referenzen.

primitive Werte und Referenzen

Stack wird in Javascript verwendet, um statische Daten wie Grundwerte (Zeichenfolgen, Zahlen, boolesche Werte, undefiniert und null) zu speichern, wobei die Größe der Daten festgelegt ist, während
Heap wird zum Speichern dynamischer Daten wie Referenzen (Objekte und Funktionen) verwendet.

Die Werte der Grundwerte werden einfach im Stapel gespeichert, während der Inhalt der Referenzen selbst im Heap gespeichert wird, auf den vom Stapel aus verwiesen wird.

Dadurch entsteht eine Situation, in der ein neu zugewiesener Wert, der auf das vorhandene Objekt verweist, als identisch interpretiert wird.

Sehen wir uns ein falsches Beispiel an?:

const [state, setState] = useState([1,2]);

const temp = state
temp.push(3)
useState(temp)

Da „Temp“ und „State“ beide auf die gleichen Werte im Heap verweisen, sind sie praktisch identisch. Dies verstößt gegen die Regel von useState, die ein neues Objekt oder einen neuen Wert erfordert, um ein erneutes Rendern auszulösen. ?

Wie kann man es lösen?

⛩️⛩️⛩️⛩️⛩️⛩️⛩️⛩️⛩️⛩️⛩️⛩️⛩️

Spread-Syntax

[...[]]

hilft Ihnen, eine separate Kopie des Werts im Heap zu erstellen.

const a = [1,2]
const b = a
console.log(Object.is(a,b)) // true

const c = [...a]
console.log(Object.is(a,c)) // false

voila ?

const [state, setState] = useState([1,2])
const temp = [...state].push(3)
setData(temp);

Jetzt unterscheidet sich der Wert temp vom ursprünglichen Objekt, wodurch sichergestellt wird, dass er nicht mehr dieselbe Referenz wie state hat.

Eine weitere Fallstrick-In-Place-Funktion

Die In-Place-Funktionen wie sort() ändern die Daten an Ort und Stelle, ohne eine separate Kopie der Datenstruktur zu erstellen.

a = [1,3]
a.sort((b,c) => c-b)
console.log(a) // => [3,1]

Wie Sie sehen können, haben sich die Werte in a geändert.

Auch hier handelt es sich um ein falsches Beispiel?:

const [state, setState] = useState([])

const sortOrder = () => {
    state.sort((a, b) => a-b)
    setState(state);
  }

Staat ist gegen die Regel mutiert. ?

Hier ist also die Lösung mit Spread-Syntax.

const [state setState] = useState([])

const sortOrder = () => {
   const newState = [...data].sort((a, b) => a-b)
    setState(newState);
  }

aber warten Sie, bevor Sie mit der Spread-Syntax zum Schluss kommen, denken Sie daran, die Dokumentation nachzuschlagen, um die neuesten Updates zu erhalten.

Überprüfen Sie ein Dokument

Es besteht die Möglichkeit, dass die Funktionen aktualisiert werden.

Zum Beispiel wird toSorted() im Jahr 2023 neu eingeführt, das eine Kopierversion der Eingabedaten zurückgibt ?

const [state, newState] = useState([])

const sortOrder = () => {
   const newState = state.toSorted((a, b) => a-b)
   newState(newState);
  }

KI ist nicht gut darin, die neuesten Informationen einzuholen, daher lohnt sich diese traditionelle Methodik immer noch!

Abschluss

Verwenden wir die Spread-Syntax [...[]]
Aber denken Sie daran, auch die Dokumentation zu konsultieren.

Referenz

https://felixgerschau.com/javascript-memory-management/
https://react.dev/reference/react/useState

Das obige ist der detaillierte Inhalt vonUmgang mit Objektwerten in React useState(). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!