摘要
在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 ;};const Child = React.memo(({ user }: { user: { name: string; age: number } }) => { console.log("Child 重新渲染"); return {user.name};});
登录后复制
虽然useMemo可以避免这种情况：
const Parent = () => { const user = React.useMemo(() => ({ name: "lee", age: 30 }), []); return ;};
登录后复制
但useMemo和useCallback更适合用于耗时的计算。对于简单的对象，这不是最佳解决方案。
直接传递原始值作为props
如果可行，最好将原始值作为props传递：
const Parent = () => { const user = { name: "lee", age: 30 }; return ;};
登录后复制
对于少量属性，这很简单。但对于包含许多属性的大型对象，这会变得繁琐。
创建更多组件
为了遵循单一职责原则，可以将大型组件拆分成更小的组件，每个组件负责处理对象的一个或几个属性：
const Parent = () => { const user = { name: "Lee", age: 30 }; return ( 登录后复制
以上就是为什么我们要避免在React中的“对象”道具的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2641753.html
