React 18开发模式下函数组件重复打印日志的原因咨询

核心原因 #

在React 18的Strict Mode开发环境中，React会额外调用一次组件函数（触发两次渲染），目的是检测组件函数中是否存在非幂等逻辑——比如在组件顶层直接修改全局变量、创建无法清理的资源这类不安全操作。

对应你的代码分析 #

你代码里的console.log('app')、console.log('Son')、console.log('GrandSon')都写在组件函数的顶层，而非useEffect或其他副作用钩子中。React渲染组件时，必须调用组件函数生成对应的JSX结构，所以每次渲染都会执行这些顶层的console.log。

开启Strict Mode后，开发环境下React会触发两次渲染流程，因此这些顶层日志会被打印两次，也就是你看到的开头重复的app、Son、GrandSon。

和useEffect行为的区别 #

你预期的日志只包含useEffect相关内容，是因为useEffect回调在组件挂载后执行，Strict Mode对useEffect的处理是先执行一次挂载+清理，再执行真实挂载。这和组件函数的重复渲染是两个独立的Strict Mode检测机制：前者针对副作用，后者针对组件函数本身的逻辑安全性。

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