React で「オブジェクト」プロパティを避けるべき理由

オブジェクトのプロップの反応に反応 反応では、プロップにオブジェクトを送信すると、再レンダリングがトリガーされます（これを避けるためにを使用する必要があります）。

可能であれば、元の値は小道具に渡す必要があります。
• useMemoより多くの小道具を複数の小さなコンポーネントに渡すコンポーネントを分解します。
小道具の変更を検出する方法Reactは「浅い比較」を使用して、小道具とステータスの変化を検出します。具体的には、JavaScript Syntaxを使用して比較します。 では、次のコードの結果は何ですか？

答えは... です！

2つのオブジェクトは同じように見えますが、JavaScriptオブジェクトは参照に従って渡されます。つまり、同じように見えても同じオブジェクトではありません。メモリに異なる分布があります。 Object.is() したがって、

子コンポーネントが

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

によって最適化されていても、それでもレンダーを再レンダーにします。

false右のReactフックを使用して不必要な再レンダリングを避けることができます

：

しかし、およびmemoは、「高価な」計算に使用する必要があります。この例では、2つのキーと文字列値のみの単純なオブジェクトは「高価」ではありません。他のソリューションが必要です。

<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

この例では、各キーを子コンポーネントの小道具に渡すことは楽なことではありません。ただし、10を超えるキー値で大きなオブジェクトを処理する必要がある場合があります。

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

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

他のコンポーネントを作成する（単一の責任の原則）useMemouseCallback

しっかりとした原理に従う場合、各プロップを処理するために複数の小さなコンポーネントを作成することを検討できます。または、少なくともオブジェクトの重要な値は複数のコンポーネントに割り当てられます。

以上がReact で「オブジェクト」プロパティを避けるべき理由の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。