為什麼我們應該在 React 中避免使用 `object` 屬性

React 中避免使用對象 Props 的原因

• 在 React 中，向 Props 傳遞對象會觸發重新渲染（需要使用 useMemo 來避免這種情況）。
• 如果可能，應向 Props 傳遞原始值。
• 將傳遞過多 Props 的組件拆分成多個較小的組件。

React 如何檢測 Props 的變化

React 使用“淺比較”來檢測 Props 和狀態的任何變化。具體來說，它使用 JavaScript 語法 Object.is() 進行比較。 那麼，以下代碼的結果是什麼？

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

答案是……false！

雖然兩個對像看起來相同，但 JavaScript 對像是按引用傳遞的，這意味著即使它們看起來相同，它們也不是同一個對象：它們在內存中具有不同的分配。

因此，即使 Child 組件經過 memo 優化，它仍然會重新渲染：

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

我們可以通過使用合適的 React Hook useMemo 來避免不必要的重新渲染：

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

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

但是，useMemo 和 useCallback 應該用於“昂貴”的計算。在我們的示例中，只有兩個鍵和字符串值的簡單對象並不算“昂貴”。我們需要其他解決方案。

向 Props 傳遞原始值

如果可能，最好將原始值作為 Props 傳遞。例如：

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

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

在這個例子中，將每個鍵傳遞給 Child 組件的 Props 並不費力。但是，有時我們需要處理具有超過 10 個鍵值對的大型對象。

創建其他組件（單一職責原則）

如果我們遵循 SOLID 原則，可以考慮創建多個較小的組件來處理每個 Prop。或者，至少將對象的鍵值對分配給多個組件。

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

  return (
    <>
      <Child1 name={user.name} />
      <Child2 age={user.age} />
    </>
  );
};</code>

以上是為什麼我們應該在 React 中避免使用 `object` 屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！