为何React中可在const变量初始化前访问它？

第一段：普通JavaScript代码 #

function app() {
  console.log(myVariable);
}
app();
const myVariable = "hello world";

这段代码运行会报错，原因是暂时性死区（TDZ）：const声明的变量在完成初始化前会处于暂时性死区，无法被访问。这里app()是同步调用，执行时myVariable还未完成声明和初始化，触发TDZ导致报错。

第二段：React组件代码 #

import { createRoot } from "react-dom/client";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      {console.log(myVariable)}
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

root.render(
    <App />
);

const myVariable = "hello world";

这段代码不会报错，核心原因是代码执行时机的差异：

• root.render(<App />)并不会立即执行App组件的渲染逻辑，而是将组件渲染任务添加到浏览器的任务队列中，等待当前同步代码执行完毕后才会处理。
• 当前同步代码会继续执行到const myVariable = "hello world"，完成变量的声明和初始化。
• 当浏览器开始处理渲染任务、执行App组件的渲染函数时，myVariable已经脱离暂时性死区，能够正常被访问，因此不会报错。

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