React父组件状态未作为子组件prop传递时触发子组件重渲染问题咨询

核心原因 #

你观察到的现象是React的默认行为，和你子组件的样式设置方式没有任何关联，你对重渲染逻辑的认知存在偏差：

• React默认规则：只要父组件触发状态更新，其下所有子组件都会默认触发重渲染，无论子组件接收的props是否发生变化
• 你测试的前两种场景都修改了父组件的状态（isMouseOver、useHover返回的isHovered均为父组件状态），父组件重渲染后自然会带动子组件重渲染，因此子组件内的handleTop方法每次都会执行
• 纯CSS实现hover的场景没有修改任何React状态，父组件不会触发重渲染，子组件自然也不会执行重渲染逻辑

验证与优化方案 #

如果希望子组件仅在props变化时才重渲染，可以用React.memo包裹子组件，它会对传入的props做浅比较，只有props发生变化时才会触发子组件重渲染：

// 子组件导出修改为
export default React.memo(PopOverComponent)

修改后你再测试hover父组件的场景，子组件的handleTop方法就不会重复执行了。

补充说明 #

大家常提到的「props变化才触发子组件重渲染」是开启优化后的效果，不是React的默认行为。React默认不对子组件props做比较是出于性能考虑：大部分场景下直接重渲染走虚拟DOM diff的开销，比递归比较所有props的开销更低，只有当子组件重渲染开销较高时，才需要手动加React.memo、useMemo这类优化手段。

内容的提问来源于stack exchange，提问作者user12113809