React严格模式下Cup组件渲染结果不符预期的原因咨询

这个组件来自React官方文档「Keeping Components Pure」章节，代码如下：

let guest = 0;

function Cup() {
    // Bad: changing a preexisting variable!
    guest = guest + 1;
    return <h2>Tea cup for guest #{guest}</h2>;
}

export default function TeaSet() {
    return (
        <>
            <Cup />
            <Cup />
            <Cup />
        </>
    );
}

在严格模式下，预期与实际渲染结果存在差异：

预期渲染结果：
Tea cup for guest #4
Tea cup for guest #5
Tea cup for guest #6

实际渲染结果：
Tea cup for guest #2
Tea cup for guest #4
Tea cup for guest #6

调试时每个Cup组件的断点会连续触发两次，具体原因如下：

• React严格模式的重复执行逻辑并非针对整个组件树只渲染两次，而是对单个组件的渲染函数单独执行两次。
• 代码中guest是全局可变变量，每个Cup组件渲染时都会直接修改这个外部状态：
  1. 第一个<Cup>：第一次执行让guest从0变为1，第二次执行再变为2 → 最终输出#2
  2. 第二个<Cup>：第一次执行让guest从2变为3，第二次执行再变为4 → 最终输出#4
  3. 第三个<Cup>：第一次执行让guest从4变为5，第二次执行再变为6 → 最终输出#6
• 这种现象本质是代码违反了React的纯组件原则：组件渲染函数不应修改外部可变状态，也不应依赖外部状态的突变。严格模式的重复执行正是为了检测这类不纯代码——纯函数多次执行不会改变外部状态，也不会影响返回结果，而你的代码因为修改全局变量，两次执行就导致了状态异常。

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