为什么我们要避免在React中的'对象”道具

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中的'对象”道具的详细内容。更多信息请关注PHP中文网其他相关文章！