React中非State变量guest的组件渲染执行逻辑解析

代码示例 #

Cup组件定义 #

let guest = 0;

function Cup({name}) {
  guest = guest + 1;
  console.log(name, guest);
  return <h2>Tea cup for guest #{guest}</h2>;
}

组件调用 #

return (
<>
        <Cup name="one"/>
        <Cup name="two"/>
        <Cup name="three"/>
</>
)

执行流程 #

1. 全局变量guest初始化值为0。
2. 父组件开始渲染，按顺序执行三个<Cup>组件：
   • 第一个<Cup name="one"/>执行：guest自增为1，控制台打印one 1，返回<h2>Tea cup for guest #1</h2>。
   • 第二个<Cup name="two"/>执行：guest自增为2，控制台打印two 2，返回<h2>Tea cup for guest #2</h2>。
   • 第三个<Cup name="three"/>执行：guest自增为3，控制台打印three 3，返回<h2>Tea cup for guest #3</h2>。
3. 所有组件渲染完成，页面渲染出三个<h2>标签。

输出原因 #

• 控制台输出：三个Cup组件是同步按顺序渲染的，每次组件执行时都会修改全局变量guest并打印当前的name和guest值，因此依次输出one 1、two 2、three 3。
• 页面输出：组件首次渲染时返回的JSX会被渲染到页面，这是首次渲染的结果，所以页面会显示三个分别对应#1、#2、#3的标题。
• 为什么修改guest不会触发重渲染？因为React只会监听state变量（通过useState/useReducer创建）或props的变化来触发组件重渲染，全局变量的修改不在React的监听范围内，所以即使后续修改guest，也不会让组件重新执行。

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