摘要
- 在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
虽然useMemo可以避免这种情况：
const Parent = () => {
const user = React.useMemo(() => ({ name: "lee", age: 30 }), []);
return
但useMemo和useCallback更适合用于耗时的计算。对于简单的对象，这不是最佳解决方案。
Flex3组件和框架的生命周期 中文WORD版
下载
在整本书中我们所涉及许多的Flex框架源码，但为了简洁，我们不总是显示所指的代码。当你阅读这本书时，要求你打开Flex Builder，或能够访问Flex3框架的源码，跟随着我们所讨论源码是怎么工作及为什么这样做。 如果你跟着阅读源码，请注意，我们经常跳过功能或者具体的代码，以便我们可以对应当前的主题。这样能防止我们远离当前的主题，主要是讲解代码的微妙之处。这并不是说那些代码的作用不重要，而是那些代码处理特别的案例，防止潜在的错误或在生命周期的后面来处理，只是我们当前没有讨论它。有需要的朋友可以下载看看
直接传递原始值作为props
如果可行，最好将原始值作为props传递：
const Parent = () => {
const user = { name: "lee", age: 30 };
return
对于少量属性，这很简单。但对于包含许多属性的大型对象，这会变得繁琐。
创建更多组件
为了遵循单一职责原则，可以将大型组件拆分成更小的组件，每个组件负责处理对象的一个或几个属性：
const Parent = () => {
const user = { name: "Lee", age: 30 };
return (
<>
