Warum sollten wir „Objekt'-Requisiten in React vermeiden?

reagieren im Reagieren der Objektprops

In React wird die Übertragung von Objekten an die Requisiten die Reaktion ausgelöst (Sie müssen

verwenden, um dies zu vermeiden).
• useMemo Wenn möglich, sollte der ursprüngliche Wert an Requisiten übergeben werden.
• zerlegen die Komponenten, die mehr Requisiten in mehrere kleinere Komponenten übergeben.
So erfassen Sie die Änderungen der Requisiten

React verwendet "flacher Vergleich", um Änderungen in Requisiten und Status zu erkennen. Insbesondere verwendet es JavaScript -Syntax , um zu vergleichen. Was ist das Ergebnis des folgenden Code?

Object.is() Die Antwort lautet ...

!

<code class="language-javascript">Object.is(
  { hello: "world" },
  { hello: "world" },
);</code>

Obwohl die beiden Objekte gleich aussehen, wird das JavaScript -Objekt gemäß Referenz übergeben, was bedeutet, dass sie, selbst wenn sie gleich aussehen, nicht dasselbe Objekt sind: Sie haben eine andere Verteilung im Speicher. false

, auch wenn die untergeordnete Komponente durch

optimiert wird, wird sie dennoch res -renders:

regelt:

memo

Wir können unnötiges Rendering vermeiden, indem wir den richtigen React -Hook

<code class="language-javascript">const Parent = () => {
  const user = { name: "Lee", age: 30 };

  return <Child user={user} />;
};

// Child 组件重新渲染
const Child = React.memo(({ user }: { user: { name: string; age: number } }) => {
  console.log("Child 渲染");
  return <div>{user.name}</div>;
});</code>

:

verwenden useMemo

Aber, und

<code class="language-javascript">const Parent = () => {
  const user = React.useMemo(() => ({ name: "Lee", age: 30 }), []);

  return <Child user={user} />;
};</code>

sollten für "teure" Berechnungen verwendet werden. In unserem Beispiel sind die einfachen Objekte von nur zwei Schlüssel und Stringwerten nicht "teuer". Wir brauchen andere Lösungen.

useMemo

Übergeben Sie den ursprünglichen Wert an Requisiten useCallback

Wenn möglich, ist es am besten, den ursprünglichen Wert als Requisiten zu bestehen. Zum Beispiel:

In diesem Beispiel ist es nicht mühelos, jeden Schlüssel an die Requisiten der untergeordneten Komponente zu übergeben. Manchmal müssen wir jedoch große Objekte mit mehr als 10 Schlüsselwerten verarbeiten.

Erstellen Sie andere Komponenten (das Prinzip der einzelnen Verantwortung)

<code class="language-javascript">const Parent = () => {
  const user = { name: "Lee", age: 30 };

  return <Child age={user.age} name={user.name} />;
};</code>

Wenn wir dem festen Prinzip folgen, können wir in Betracht ziehen, mehrere kleinere Komponenten zu erstellen, um jede Requisite zu verarbeiten. Zumindest der Schlüsselwert des Objekts wird mehreren Komponenten zugeordnet.

Das obige ist der detaillierte Inhalt vonWarum sollten wir „Objekt'-Requisiten in React vermeiden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!