1. 现象复盘 (The Issue)

在开发 React 组件时，浏览器或构建工具（如 Vite）抛出以下错误：

Bash

Uncaught ReferenceError: Cannot access 'variableName' before initialization
  • 本质原因：在变量（或字面量函数）完成初始化之前，代码尝试在当前作用域中访问它。这触发了 JavaScript 的暂时性死区（TDZ, Temporal Dead Zone）。

2. 核心知识点 (Core Concepts)

① 变量提升 (Hoisting) vs 暂时性死区 (TDZ)

  • 传统 var 与 function 声明：会被提升到当前作用域的顶部，并赋予默认值 undefined（函数则直接可用）。
  • 现代 let 与 const 声明：它们的声明也会被提升，但不会被初始化。在代码运行到它们被实际赋值的那一行之前，它们都处于 暂时性死区 (TDZ)。在此期间访问该变量，程序会立刻崩溃。

💡 设计哲学（Fail Fast 尽早报错）

TDZ 的存在是为了强迫开发者保持“先定义、后使用”的良好习惯，避免因使用 undefined 的变量而引入难以排查的隐式业务 Bug。

② 典型错误场景：React 依赖评估

在 React 组件内部，useEffect、useMemo 或 useCallback 的依赖数组（Dependency Array）是在组件渲染执行阶段从上到下进行评估的。

JavaScript

function MyComponent() {
  // ❌ 错误示例：此时 getData 处于 TDZ 中
  useEffect(() => {
    getData();
  }, [getData]); // 💥 报错！无法在初始化前访问 'getData'

  // 函数定义在后
  const getData = () => {
    console.log("Fetching...");
  };
}

3. 工业级开发规范 (Best Practices)

① 组件内部纵向书写顺序 (Component Anatomy)

为了彻底避免 TDZ 错误，React 组件内部的代码应遵循严格的纵向分层结构：

JavaScript

function BusinessComponent({ propA }) {
  // Layer 1: 状态与引用定义 (State & Refs)
  const [data, setData] = useState(null);
  const containerRef = useRef(null);

  // Layer 2: 核心业务逻辑 / 工具函数 (Functions)
  // 始终在 Hook 使用它们之前进行定义
  const calculateKey = () => {
    return `prefix_${propA}`;
  };

  const handleAction = () => {
    const key = calculateKey();
    setData(key);
  };

  // Layer 3: 副作用与派生状态 (Effects & Memos)
  // 此时上方的函数已全部初始化完毕，放进依赖项绝对安全
  useEffect(() => {
    handleAction();
  }, [handleAction]); 

  // Layer 4: 渲染输出 (JSX)
  return <div>{data}</div>;
}

② 纯函数提升 (Function Hoisting Outside Component)

如果组件内部的某个辅助函数不依赖组件内的 state 或 props，最规范的做法是将其移出组件外部。

  • 收益：

    1. 完美避开组件内部的 TDZ 限制。
    2. 避免组件每次重新渲染（Re-render）时都重复创建该函数，提升内存性能。

JavaScript

// ✅ 规范：移到组件外部，或者抽离到 utils.js
const generateToken = (id) => `token_${id}`;

function UserComponent({ userId }) {
  useEffect(() => {
    const token = generateToken(userId);
  }, [userId]); // 此时不需要将 generateToken 放入依赖项
}

③ 工程化防御：静态代码检查 (ESLint)

不要依赖肉眼排查。在团队开发中，应在 .eslintrc 中配置以下规则，使编辑器在编写代码时自动标红提醒：

JSON

{
  "rules": {
    "no-use-before-define": ["error", { "functions": true, "classes": true }]
  }
}

4. 延伸思考 (Takeaways)

  • Fail-Fast 思想：报错并不坏，在编译阶段或初始化阶段暴露出的 ReferenceError，远比在线上运行阶段带着 undefined 产生逻辑错乱要安全得多。
  • 代码的可读性：严格的纵向分层不仅消灭了 TDZ，还能让团队成员在阅读组件代码时，清晰地按照“数据 -> 逻辑 -> 副作用 -> 视图”的链路去理解业务。

本文归档于个人知识库 · 领域：CS & AI · 模块：04 Project_CS_AI/Frontend