为何React中变量可在定义前使用？以initialTasks代码为例

这不是React的特殊机制，完全是JavaScript的变量提升和函数执行时机决定的：

• 变量提升（Hoisting）：用const/let声明的变量会被提升到当前模块作用域的顶部，但会处于「暂时性死区」——只有当代码执行到变量赋值的那一行之后，才能正常访问它。
• React组件的执行时机：你写的TaskApp是一个函数组件，模块加载的时候只是定义了这个函数，并没有立刻执行它。只有当React需要渲染这个组件（比如把它挂载到DOM或者被父组件引用）时，TaskApp函数才会被调用执行。

回到你的代码：
模块加载时，先完成所有声明的提升（包括TaskApp函数、initialTasks变量），然后按代码顺序执行赋值：先定义tasksReducer函数，再给nextId赋值，最后给initialTasks赋值。等React去渲染TaskApp的时候，initialTasks早就完成赋值了，所以在useReducer(tasksReducer, initialTasks)里能正常访问到它。

顺便提一句：如果在模块加载阶段就直接执行TaskApp（比如在initialTasks赋值前调用这个函数），那肯定会报错，因为这时候initialTasks还在暂时性死区里。

内容的提问来源于stack exchange，提问作者Johnny Chen