react.js - 为什么变量获取不到，显示初始化前不能操作变量（深层逻辑）？

Question

react组件jsx代码如下：

import React from 'react'import {num} from '@/router/pageExport'console.log(num) // 报错：Cannot access 'num' before initializationexport default function StoreManage() {  console.log(num,123) // 正常打印  return (    <div>StoreManage</div>  )}

文件pageExport.js的代码如下：

export let num = 3

在询问了GPT之后，大概思考方向是jsx组件会进行编译，导致在函数StoreManage外的变量似乎是在import前执行的，导致未进行变量的初始化，而StoreManage函数里的代码是在import之后执行，所以可以正常打印pageExport里的变量num。

我刚学习react，所以特别想了解一下其中的原因，或者说为什么是这样的作用顺序，有大佬帮我解一下惑吗

Answer 1

编译阶段的时候：处理import和export语句，确定依赖关系，但变量没初始化。
运行阶段的时候：执行组件外部的代码，这个时候访问没初始化的变量会就会报错。
组件渲染的时候：执行组件内部的代码，这个时候变量已经初始化，就可以正常访问。

大概是这样代码运行的机制