为什么我们要避免在React中的“对象”道具-js教程-PHP中文网

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

霞舞

发布： 2025-01-25 20:48:11

原创

890人浏览过

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

摘要

在React中，将对象作为props传递会导致不必要的重新渲染（可以使用useMemo避免）。
尽可能直接传递原始值作为props。
将props过多的组件拆分成更小的组件，遵循单一职责原则。

React如何检测props变化

React使用“浅比较”来检测props和state的变化，具体使用Object.is()进行比较。因此，即使两个对象看起来相同，但由于它们在内存中是不同的引用，Object.is()也会返回false，导致重新渲染：

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

登录后复制

即使使用了React.memo，以下子组件仍然会重新渲染：

<code class="javascript">const Parent = () => {
  const user = { name: "lee", age: 30 };
  return <Child user={user} />;
};

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

登录后复制

虽然useMemo可以避免这种情况：

<code class="javascript">const Parent = () => {
  const user = React.useMemo(() => ({ name: "lee", age: 30 }), []);
  return <Child user={user} />;
};</code>

登录后复制

但useMemo和useCallback更适合用于耗时的计算。对于简单的对象，这不是最佳解决方案。

Flex3组件和框架的生命周期中文WORD版

在整本书中我们所涉及许多的Flex框架源码，但为了简洁，我们不总是显示所指的代码。当你阅读这本书时，要求你打开Flex Builder，或能够访问Flex3框架的源码，跟随着我们所讨论源码是怎么工作及为什么这样做。如果你跟着阅读源码，请注意，我们经常跳过功能或者具体的代码，以便我们可以对应当前的主题。这样能防止我们远离当前的主题，主要是讲解代码的微妙之处。这并不是说那些代码的作用不重要，而是那些代码处理特别的案例，防止潜在的错误或在生命周期的后面来处理，只是我们当前没有讨论它。有需要的朋友可以下载看看

查看详情

直接传递原始值作为props

如果可行，最好将原始值作为props传递：

<code class="javascript">const Parent = () => {
  const user = { name: "lee", age: 30 };
  return <Child name={user.name} age={user.age} />;
};</code>

登录后复制

对于少量属性，这很简单。但对于包含许多属性的大型对象，这会变得繁琐。

创建更多组件

为了遵循单一职责原则，可以将大型组件拆分成更小的组件，每个组件负责处理对象的一个或几个属性：

<code class="javascript">const Parent = () => {
  const user = { name: "Lee", age: 30 };
  return (
    <>
      <Child1 name={user.name} />
      <Child2 age={user.age} />
    </>
  );
};</code>

登录后复制

以上就是为什么我们要避免在React中的“对象”道具的详细内容，更多请关注php中文网其它相关文章！