标签导航：

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

摘要

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

React如何检测props变化

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

Object.is(
  { hello: "world" },
  { hello: "world" },
); // false

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

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>;
});

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

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

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

直接传递原始值作为props

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

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

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

创建更多组件

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

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