React变量提升机制解析：为何后定义的const变量可正常使用？

核心原因在于函数组件的执行时机，和变量提升的规则并不冲突：

• 你写的HeadingComponent是用const声明的箭头函数组件，它确实不会被提升，但组件此时只是被定义，并没有立刻执行内部的代码。
• const head虽然定义在组件之后，但等到React真正渲染组件、调用HeadingComponent函数的时候，整个代码已经执行到const head这一行，head变量已经存在于当前作用域中了。

换个普通JS的例子就能明白，和React无关：

const sayHi = () => {
  console.log(name);
};
const name = "张三";
sayHi(); // 正常输出"张三"

这个例子里sayHi函数定义在name之前，但调用sayHi时name已经被定义，所以不会报错，你的React代码逻辑完全一致。

内容的提问来源于stack exchange，提问作者Kr Nityanand