在 react 函数组件中，像 initialtasks 这样的常量虽在代码底部声明，却可在顶部 usereducer 中安全使用——这并非“变量提升”，而是因函数体仅在组件被调用时执行，其内部对变量的引用发生在变量实际声明之后的运行时。
在 react 函数组件中，像 initialtasks 这样的常量虽在代码底部声明，却可在顶部 usereducer 中安全使用——这并非“变量提升”，而是因函数体仅在组件被调用时执行，其内部对变量的引用发生在变量实际声明之后的运行时。
这段代码看似违反了“先定义后使用”的直觉，实则体现了 JavaScript 执行模型与 React 渲染机制的协同：
- 函数声明 ≠ 立即执行：TaskApp 是一个函数声明（而非立即调用），其函数体（包括 useReducer(initialTasks)）不会在定义时运行，而是在 React 渲染该组件时才首次执行。
- 变量作用域是词法的，但求值是运行时的：initialTasks 在模块顶层以 const 声明，具有块级作用域；当 TaskApp 执行时，它能访问同一模块作用域内已初始化的 initialTasks —— 此时变量早已完成声明与赋值。
- 与 var 提升无关，也非 let/const 例外：let 和 const 不会提升初始化（存在暂时性死区），但本例中 initialTasks 的引用发生在它已被完全初始化之后（即函数调用时），因此完全合法。
✅ 正确理解的关键在于区分：
- 定义顺序（源码书写位置）
- 声明时机（模块加载时 const initialTasks = [...] 被解析并初始化）
- 求值时机（TaskApp() 调用时才读取 initialTasks 的值）
// ✅ 安全：initialTasks 在模块加载阶段已完成初始化
const initialTasks = [
{ id: 0, text: '参观卡夫卡博物馆', done: true },
{ id: 1, text: '看木偶戏', done: false },
{ id: 2, text: '打卡列侬墙', done: false }
];
export default function TaskApp() {
// ⏱️ 此行仅在组件渲染时执行 → 此时 initialTasks 已就绪
const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
// ...
}
⚠️ 注意事项：
- 若将 initialTasks 改为函数内声明（如 const initialTasks = [...] 写在 TaskApp 函数体内），则必须放在 useReducer 之前，否则会触发暂时性死区（TDZ）错误；
- 模块级变量（const/let）在模块求值（evaluation）阶段即完成初始化，早于任何组件函数调用；
- 此模式常见于 React 应用中：将初始状态、配置常量等置于文件底部，保持组件逻辑清爽，不影响运行正确性。
总结：这不是 React 特性，而是 JavaScript 模块执行模型的自然体现——只要变量在实际读取时已初始化，无论其在源码中位于何处，均可安全使用。
