Pourquoi devrions-nous éviter les accessoires « objet » dans React

réagir dans la réaction des accessoires d'objet

Dans React, la transmission d'objets aux accessoires déclenchera RE-Rendaring (vous devez utiliser

pour éviter cela).
• useMemo Si possible, la valeur d'origine doit être transmise aux accessoires.
• démonter les composants qui passent plus d'accessoires dans plusieurs composants plus petits.
Comment détecter les changements des accessoires

React utilise la "comparaison peu profonde" pour détecter toute modification des accessoires et de l'état. Plus précisément, il utilise la syntaxe JavaScript pour comparer. Alors, quel est le résultat du code suivant?

Object.is() La réponse est ...

!

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

Bien que les deux objets se ressemblent, l'objet JavaScript est passé en fonction de la référence, ce qui signifie que même s'ils se ressemblent, ils ne sont pas le même objet: ils ont une distribution différente en mémoire. false

Par conséquent, même si le composant enfant est optimisé par

, il re-redémencera:

memo Nous pouvons éviter le re-leringage inutile en utilisant le bon crochet React

:

<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>

useMemo mais, et

doivent être utilisés pour les calculs "coûteux". Dans notre exemple, les objets simples de seulement deux clés et valeurs de chaîne ne sont pas "chers". Nous avons besoin d'autres solutions.

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

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

Passez la valeur d'origine aux accessoires useMemo useCallback

Si possible, il est préférable de passer la valeur d'origine en tant qu'accessoires. Par exemple:

Dans cet exemple, il n'est pas sans effort de transmettre chaque clé aux accessoires de la composante enfant. Cependant, nous devons parfois traiter de grands objets avec plus de 10 valeurs clés.

Créer d'autres composants (le principe de la responsabilité unique)

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

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

Si nous suivons le principe solide, nous pouvons envisager de créer plusieurs composants plus petits pour traiter chaque accessoire. Ou, au moins la valeur clé de l'objet est attribuée à plusieurs composants.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!