箭头函数如何在 React 中与 useEffect 配合使用：深入指南-js教程-PHP中文网

箭头函数如何在 React 中与 useEffect 配合使用：深入指南

霞舞

发布： 2025-01-18 08:12:01

原创

363人浏览过

箭头函数如何在 react 中与 useeffect 配合使用：深入指南

最近一次技术面试中，一个关于提升以及它在 React 中与 useEffect 钩子交互的问题引起了我的思考。面试官好奇，为什么在 useEffect 钩子内部定义的箭头函数能够在 useEffect 本身内部被调用。虽然当时没能给出完美的答案，但这激发了我深入研究其底层机制的兴趣，以下是我的发现。

场景重现

问题描述的代码片段如下：

import React, { useEffect } from "react";

const MyComponent = () => {
  useEffect(() => {
    myArrowFunction(); // 这段代码居然能运行！
  }, []);

  const myArrowFunction = () => {
    console.log("箭头函数被调用");
  };

  return <div>查看控制台</div>;
};

export default MyComponent;

登录后复制

乍一看，这段代码的运行结果似乎违反直觉。众所周知，箭头函数不会被提升，这与传统的函数声明不同。那么，为什么 React 中的 useEffect 却表现得好像函数在调用之前就已经定义好了一样呢？

要理解这一点，我们需要深入 JavaScript 和 React 的核心概念。

1. JavaScript 中的提升机制

提升是 JavaScript 的一个特性，变量和函数声明在代码执行前会被“移动”到其作用域的顶部。这意味着你可以在显式定义变量或函数之前使用它们。

函数声明与函数表达式

函数声明: 函数声明会被完全提升——变量和函数体在定义行之前都可用。

hello(); // 可以运行！

function hello() {
  console.log("hello, world!");
}

登录后复制

函数表达式: 函数表达式的提升机制有所不同。只有变量名会被提升，函数体不会。这意味着如果你在赋值之前调用函数，将会遇到 TypeError 错误。

hello(); // TypeError: hello is not a function

const hello = function() {
  console.log("hello, world!");
};

登录后复制

箭头函数: 箭头函数是一种特殊的函数表达式。与普通的函数表达式一样，只有变量名会被提升，函数体在代码执行到达赋值语句之前是未初始化的。

myArrowFunction(); // TypeError: myArrowFunction is not a function

const myArrowFunction = () => {
  console.log("箭头函数");
};

登录后复制

2. React 的 useEffect 钩子工作机制

在 React 中，useEffect 钩子允许你在组件渲染阶段之后执行副作用。关键在于：

渲染后执行: useEffect 的回调函数并非在初始渲染阶段执行，而是在 DOM 更新之后执行。
执行上下文: useEffect 钩子可以访问同一作用域内定义的所有变量和函数。由于 myArrowFunction 在组件作用域内定义，因此当 useEffect 回调函数执行时，它就可以被访问。

3. 为什么箭头函数在 useEffect 中有效

现在，让我们结合以上概念来分析代码。

步骤 1：组件渲染

当组件渲染时，会按顺序执行以下步骤：