最近一次技术面试中，一个关于提升以及它在 React 中与 useEffect 钩子交互的问题引起了我的思考。面试官好奇，为什么在 useEffect 钩子内部定义的箭头函数能够在 useEffect 本身内部被调用。虽然当时没能给出完美的答案，但这激发了我深入研究其底层机制的兴趣，以下是我的发现。
场景重现
问题描述的代码片段如下：
<code class="javascript">import React, { useEffect } from "react";
const MyComponent = () => {
useEffect(() => {
myArrowFunction(); // 这段代码居然能运行！
}, []);
const myArrowFunction = () => {
console.log("箭头函数被调用");
};
return <div>查看控制台</div>;
};
export default MyComponent;</code>
乍一看，这段代码的运行结果似乎违反直觉。众所周知，箭头函数不会被提升，这与传统的函数声明不同。那么，为什么 React 中的 useEffect 却表现得好像函数在调用之前就已经定义好了一样呢？
要理解这一点，我们需要深入 JavaScript 和 React 的核心概念。
1. JavaScript 中的提升机制
提升是 JavaScript 的一个特性，变量和函数声明在代码执行前会被“移动”到其作用域的顶部。这意味着你可以在显式定义变量或函数之前使用它们。
函数声明与函数表达式
- 函数声明: 函数声明会被完全提升——变量和函数体在定义行之前都可用。
<code class="javascript">hello(); // 可以运行！
function hello() {
console.log("hello, world!");
}</code>
-
函数表达式: 函数表达式的提升机制有所不同。只有变量名会被提升，函数体不会。这意味着如果你在赋值之前调用函数，将会遇到
TypeError错误。
<code class="javascript">hello(); // TypeError: hello is not a function
const hello = function() {
console.log("hello, world!");
};</code>
- 箭头函数: 箭头函数是一种特殊的函数表达式。与普通的函数表达式一样，只有变量名会被提升，函数体在代码执行到达赋值语句之前是未初始化的。
<code class="javascript">myArrowFunction(); // TypeError: myArrowFunction is not a function
const myArrowFunction = () => {
console.log("箭头函数");
};</code>
2. React 的 useEffect 钩子工作机制
在 React 中，useEffect 钩子允许你在组件渲染阶段之后执行副作用。关键在于：
-
渲染后执行:
useEffect的回调函数并非在初始渲染阶段执行，而是在 DOM 更新之后执行。 -
执行上下文:
useEffect钩子可以访问同一作用域内定义的所有变量和函数。由于myArrowFunction在组件作用域内定义，因此当useEffect回调函数执行时，它就可以被访问。
3. 为什么箭头函数在 useEffect 中有效
现在，让我们结合以上概念来分析代码。
步骤 1：组件渲染
当组件渲染时，会按顺序执行以下步骤：
- JavaScript 解析
MyComponent函数。 - 它遇到
useEffect调用，并注册稍后执行的回调函数（渲染后）。 - 它使用箭头函数初始化变量
myArrowFunction。
当 React 执行 useEffect 回调时，myArrowFunction 已经被定义，因此可以正常调用。
步骤 2：生命周期
本例中的生命周期如下：
-
代码解析: 整个
MyComponent函数被解析，useEffect被注册，myArrowFunction被初始化。 - 渲染: 组件输出渲染到 DOM。
-
useEffect 执行: 渲染之后，React 运行
useEffect回调。此时，myArrowFunction已完全定义并可访问。
4. 常见误解
-
误解 1：箭头函数被提升 箭头函数本身并没有被提升。它之所以有效，是因为
useEffect在函数体完全执行后运行。 -
误解 2：useEffect 内联执行
useEffect不会在解析阶段内联执行。它计划在渲染阶段之后执行。
5. 暂时性死区 (TDZ) 和 React
暂时性死区 (TDZ) 指的是变量作用域开始到其实际声明之间无法访问的时间段。在本例中，不存在 TDZ 问题，因为：
-
myArrowFunction在useEffect执行之前声明。 - React 的生命周期确保
useEffect回调在组件函数完成执行之前不会运行。
6. 总结
总而言之：
- JavaScript 的提升机制：箭头函数不会被提升。
- React 生命周期：
useEffect并非立即执行，而是在组件渲染之后执行。 - 执行顺序：当
useEffect回调函数运行时，组件作用域内的所有变量和函数（包括箭头函数）都已初始化。
JavaScript 的作用域规则和 React 渲染生命周期的巧妙结合解释了为什么可以在 useEffect 中使用箭头函数，即使它在代码中看起来是“稍后”定义的。
7. 面试技巧
如果在面试中遇到这个问题，可以这样简洁地回答：
- 箭头函数不会被提升，但 React 的
useEffect在组件渲染后执行。 - 这确保了组件作用域中定义的任何箭头函数在
useEffect运行时都已完全初始化并可访问。 - 此行为依赖于 React 的生命周期和 JavaScript 的执行顺序，而不是提升机制。
希望以上解释能够帮助你理解这个问题。欢迎讨论和提出更多问题！
