摘要
- 在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更适合用于耗时的计算。对于简单的对象，这不是最佳解决方案。
直接传递原始值作为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> 
