子组件中setInterval触发整个React应用重渲染问题求助

核心现象 #

当父组件渲染自定义SubComponent时，Countdown组件的状态更新会触发整个父组件重渲染；替换为<></>空片段后，仅Countdown自身重渲染。

原因分析 #

1. 自定义组件引用不稳定
   如果SubComponent是定义在父组件内部的函数组件，父组件每次重渲染都会生成全新的SubComponent函数引用。React会将其判定为不同的组件类型，执行卸载旧组件、挂载新组件的操作，这个过程会触发父组件的连带重渲染。而空片段是React内置的静态元素，不存在引用变化的问题。

2. 未稳定化的props传递
   若Countdown组件接收了父组件传递的回调函数，且该函数未通过useCallback包裹，父组件每次渲染都会创建新的回调引用。Countdown会因props变化触发重渲染，同时间接带动父组件重渲染；使用空片段时，父组件未传递动态props，因此仅Countdown自身更新。

3. React渲染机制特性
   React会在组件的props/状态变化、子组件树结构变化时触发重渲染。自定义组件的引用变化会导致子组件树结构被判定为更新，进而触发父组件重渲染；空片段不会改变子组件树的稳定结构，因此不会触发父组件重渲染。

解决方案 #

• 将SubComponent提取到父组件外部定义，避免每次父组件渲染时生成新的组件引用；
• 若必须在父组件内部定义SubComponent，使用useMemo包裹组件定义，确保引用稳定；
• 对传递给Countdown的回调函数使用useCallback包裹，避免不必要的props变化；
• 借助React DevTools的Profiler工具，精准定位重渲染的触发源。

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