React Beta Docs不纯组件示例疑问：guest变量为何每次递增2

return (<Cup />)

这是React**开发模式下严格模式（Strict Mode）**的双重渲染机制导致的，具体原因如下：

• React在开发环境中，会自动将组件函数调用两次，目的是帮你检测组件中的不纯操作（比如修改外部变量这类副作用）。
• 你看到的示例里，guest++是直接写在组件渲染逻辑里的，属于典型的不纯操作——组件渲染时修改了外部状态。当

  return (<Cup />)
  

  被调用时，组件函数执行两次，guest++也就被执行了两次，所以看起来每次调用变量就递增了2。
• 注意：这个双重渲染的逻辑只存在于开发环境，生产环境下组件只会渲染一次，此时每次调用

  return (<Cup />)
  

  只会让guest递增1。

这个示例本身就是React文档用来展示不纯组件危害的典型案例：依赖并修改外部状态会导致组件的渲染结果不可预测，而严格模式的双重渲染刚好能帮你更早发现这类问题。

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