1
function outer() {
2
  let num = 0; // 外层函数局部变量
3
  // 内层函数形成闭包，捕获外层的num
4
  function inner() {
5
    console.log("闭包内的num：", num);
6
  }
7
  num = 1; // 外层修改变量值
8
  return inner;
9
}
10

11
const innerFn = outer();
12
innerFn(); // 输出：0（而非1！闭包捕获的是创建时的num=0）

1
import { useState } from "react";
2

3
function TimerClosure() {
4
  const [count, setCount] = useState(0);
5

6
  const handleClick = () => {
7
    // 步骤1：更新状态为1，触发组件重新渲染
8
    setCount(1);
9
    // 步骤2：创建定时器，形成闭包（绑定当前渲染周期，此时count=0）
10
    setTimeout(() => {
11
      console.log("定时器中的count：", count); // 输出：0（预期：1），陷阱触发
12
    }, 1000);
13
  };
14

15
  return (
16
    <div>
17
      <p>当前count：{count}</p>
18
      <button onClick={handleClick}>更新count并执行定时器</button>
19
    </div>
20
  );
21
}

1
import { useState } from "react";
2

3
function RequestClosure() {
4
  const [userId, setUserId] = useState(1);
5

6
  const fetchUserInfo = () => {
7
    // 步骤1：更新用户ID为2
8
    setUserId(2);
9
    // 步骤2：发起异步请求（模拟接口调用），回调形成闭包
10
    new Promise((resolve) => {
11
      setTimeout(() => resolve("用户信息"), 1000);
12
    }).then((res) => {
13
      console.log("请求完成，当前userId：", userId); // 输出：1（预期：2），陷阱触发
14
      console.log("获取用户ID：", userId, "的信息：", res);
15
    });
16
  };
17

18
  return (
19
    <div>
20
      <p>当前用户ID：{userId}</p>
21
      <button onClick={fetchUserInfo}>更新ID并获取用户信息</button>
22
    </div>
23
  );
24
}

1
import { useState, useEffect } from "react";
2

3
function EventClosure() {
4
  const [isShow, setIsShow] = useState(false);
5

6
  // 组件挂载时绑定window滚动事件
7
  useEffect(() => {
8
    // 事件回调形成闭包，捕获初始状态isShow=false
9
    const handleScroll = () => {
10
      console.log("滚动时的isShow：", isShow); // 始终输出：false
11
      if (isShow) {
12
        console.log("状态已更新，执行相关逻辑");
13
      }
14
    };
15
    window.addEventListener("scroll", handleScroll);
16
    // 组件卸载时解绑事件
17
    return () => window.removeEventListener("scroll", handleScroll);
18
  }, []); // 空依赖，仅挂载时执行一次
19

20
  return (
21
    <div style={{ height: "2000px" }}>
22
      <p>滚动页面查看控制台，点击按钮更新状态</p>
23
      <button onClick={() => setIsShow(true)}>更新isShow为true</button>
24
    </div>
25
  );
26
}

1
import { useState, useEffect } from "react";
2

3
function EventClosure() {
4
  const [isShow, setIsShow] = useState(false);
5

6
  // 监听isShow变化，状态更新时重新创建闭包
7
  useEffect(() => {
8
    // 新闭包捕获最新的isShow状态
9
    const handleScroll = () => {
10
      console.log("滚动时的isShow：", isShow); // 状态更新后输出：true
11
      if (isShow) {
12
        console.log("状态已更新，执行相关逻辑");
13
      }
14
    };
15
    window.addEventListener("scroll", handleScroll);
16

17
    // 销毁旧闭包，避免内存泄漏和多重监听
18
    return () => window.removeEventListener("scroll", handleScroll);
19
  }, [isShow]); // 依赖isShow，状态更新时重新执行
20

21
  return (
22
    <div style={{ height: "2000px" }}>
23
      <p>滚动页面查看控制台，点击按钮更新状态</p>
24
      <button onClick={() => setIsShow(true)}>更新isShow为true</button>
25
    </div>
26
  );
27
}

1
import { useState, useCallback, memo } from "react";
2

3
// 子组件：memo包裹，浅比较props，避免不必要的重渲染
4
const Child = memo(({ handleClick, count }) => {
5
  const handleChildClick = () => {
6
    handleClick();
7
    // 子组件内部闭包：定时器
8
    setTimeout(() => {
9
      console.log("子组件定时器中的count：", count); // 稳定捕获最新count
10
    }, 1000);
11
  };
12
  return (
13
    <button onClick={handleChildClick}>子组件按钮（点击触发父组件更新）</button>
14
  );
15
});
16

17
// 父组件：useCallback缓存函数，保证引用不变
18
function Parent() {
19
  const [count, setCount] = useState(0);
20

21
  // 缓存函数，空依赖表示永久缓存，仅当需要更新时添加依赖
22
  const handleClick = useCallback(() => {
23
    // 函数式更新，进一步保证获取最新状态
24
    setCount((prev) => prev + 1);
25
  }, []);
26

27
  return (
28
    <div>
29
      <p>父组件count：{count}</p>
30
      <Child handleClick={handleClick} count={count} />
31
    </div>
32
  );
33
}