React中如何检查组件是否发生重渲染？

首先直接给结论：你在组件return语句前加console.log('render')的方式完全可以用来判断组件是否触发了渲染（包括首次渲染和重渲染），但得先搞清楚React里「渲染」的核心含义。

React的渲染流程分两个关键阶段：

• Render阶段：组件函数执行，生成新的虚拟DOM（也就是你return里的JSX），随后React会对比新旧虚拟DOM的差异。
• Commit阶段：如果虚拟DOM存在差异，React会把这些更新同步到真实DOM上；如果没有差异，这一步就直接跳过。

你添加的console.log('render')是在组件函数执行时运行的，也就是Render阶段的起始环节。只要这个日志打印出来，就说明组件进入了Render阶段——不管后续Commit阶段会不会更新真实DOM，这都属于一次「渲染」（重渲染指的是第二次及以上进入Render阶段）。

不过要注意几个细节：

• 如果你给组件包裹了React.memo，或者用useMemo封装了子组件，当props/state没有变化时，组件不会进入Render阶段，日志也就不会打印，这完全符合优化后的预期。
• 别把「渲染」和「真实DOM更新」划等号：有时候组件进入Render阶段，但新旧虚拟DOM完全一致，Commit阶段不会更新DOM，但这依然算一次重渲染——你的日志能准确捕捉到这种「白跑一趟」的渲染，反而能帮你定位需要优化的点。
• 尽量避免在组件函数里写其他无关的副作用代码，不然可能会混淆日志触发的原因，但单纯加这个日志是非常干净的判断方式。

总结：这个方法简单直接，是判断组件是否触发渲染的有效手段，完全可以放心用。

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