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

Question

react组件jsx代码如下：

import React from 'react'
import {num} from '@/router/pageExport'

console.log(num) // 报错：Cannot access 'num' before initialization

export 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语句，确定依赖关系，但变量没初始化。
运行阶段的时候：执行组件外部的代码，这个时候访问没初始化的变量会就会报错。
组件渲染的时候：执行组件内部的代码，这个时候变量已经初始化，就可以正常访问。

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

Answer 2

发现问题：
在pageExport页面中，我(⊙_⊙)?引入了test组件

import Test from '../views/subs/auth/Test.jsx'

同时，在该页面末尾暴露了num这个变量，并在test组件的函数之外区域打印，就造成了报错：Cannot access 'num' before initialization
因此这就相当于

// Test组件中
console.log(num)

// pageExport页面 开头
import Test

// pageExport页面 末尾
export let num = 3

即就相当于 在使用let生命变量前，就打印了num的值，就造成了上述报错，在变量初始化前不能访问num变量。。。。。。

结束，我太sb了