React不纯组件疑问：Cup组件重复执行及变量异常问题

先明确核心问题：这段代码里的Cup是不纯组件——它修改了组件外部的全局变量guest，违反了React组件“相同输入返回相同输出、无额外副作用”的纯函数原则，这也是所有异常表现的根源。

1. 为什么Cup组件会执行两次？ #

这是React**严格模式（Strict Mode）**在开发环境下的刻意行为。严格模式会重复调用组件函数、useState初始化逻辑等，目的是帮开发者揪出组件里的不纯操作（比如修改全局变量这类副作用），生产环境下不会出现这种重复执行的情况。另外React 18的Strict Mode还新增了“挂载-卸载-重新挂载”的检测逻辑，也会导致组件函数被多次调用。

2. 即便执行两次，为何没有输出1、3、5这类数字？ #

因为严格模式下，React会直接丢弃第一次完整渲染的结果，只用第二次渲染的内容更新DOM。再加上全局变量guest会被多次累加：

• 第一次渲染TeaSet时，三个Cup各执行两次，guest从0一路加到6，但这次的渲染结果被直接丢弃；
• 第二次渲染时，guest从6开始，三个Cup再各执行两次，最终guest加到12，React用这次的结果更新DOM，所以你看到的是7、9、11这类数字，而非第一次渲染的1、3、5。

3. 为何在TeaSet组件中打印guest变量始终显示0？ #

问题出在打印时机上：TeaSet组件函数执行时，会先跑你的打印代码，之后才会渲染Cup组件。也就是说，打印的时候Cup还没机会修改guest，所以第一次打印肯定是0。
如果是严格模式下，TeaSet会被调用第二次，这时候guest已经被第一次渲染的Cup改成6了，第二次打印应该是6，可能你没注意到这条日志；要是每次刷新页面测试，模块会重新加载，guest又被重置为0，自然每次刷新的第一次打印都是0。

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