```jsx function MyComponent({ userId }) { useEffect(() => { const timer = setInterval(() => { console.log(userId); // 始终输出初始的 userId，即使 props 更新 }, 1000); return () => clearInterval(timer); }, []); // 依赖数组为空 } ``` **正确解决方式：** 1. **将实际依赖加入依赖数组** 若 userId 会变化，应将其加入依赖项： ```jsx useEffect(() => { const timer = setInterval(() => { console.log(userId); }, 1000); return () => clearInterval(timer); }, [userId]); ``` 但注意：这会导致每次 userId 变化时清除并重建定时器。 2. **使用 useRef 同步最新值（适用于定时器等长期运行的任务）** ```jsx function MyComponent({ userId }) { const userIdRef = useRef(userId); useEffect(() => { userIdRef.current = userId; // 每次 userId 更新时同步 ref }, [userId]); useEffect(() => { const timer = setInterval(() => { console.log(userIdRef.current); // 始终获取最新值 }, 1000); return () => clearInterval(timer); }, []); // 仅挂载/卸载时执行 } ``` 3. **使用函数式更新或回调引用（如 useEvent RFC 提案）** 在 React 18+ 中，可考虑使用 useEvent（尚未正式发布）或通过自定义 Hook 封装逻辑。 **核心原则：** - 依赖数组必须包含 effect 中用到的所有响应式值（props、state、函数等）。 - 若需在 effect 中访问最新值但又不想频繁触发 effect，可结合 useRef 作为“可变容器”。 - 避免“撒谎”——即 effect 使用了某个变量却未将其加入依赖数组，这是闭包陷阱的根源。

在使用 React 的 useEffect 时，为什么有时候依赖数组为空（[]）会导致闭包问题？如何正确解决？

回答与解析：

当 useEffect 的依赖数组为空（[]）时，该 effect 仅在组件挂载时执行一次。此时 effect 内部引用的 props 或 state 会被“捕获”为初始值，形成闭包。如果这些值后续发生变化，effect 内部仍使用的是旧值，从而导致逻辑错误。

示例问题：

function MyComponent({ userId }) {
  useEffect(() => {
    const timer = setInterval(() => {
      console.log(userId); // 始终输出初始的 userId，即使 props 更新
    }, 1000);
    return () => clearInterval(timer);
  }, []); // 依赖数组为空
}

正确解决方式：

1. 将实际依赖加入依赖数组
   若 userId 会变化，应将其加入依赖项：

   useEffect(() => {
     const timer = setInterval(() => {
       console.log(userId);
     }, 1000);
     return () => clearInterval(timer);
   }, [userId]);
   

   但注意：这会导致每次 userId 变化时清除并重建定时器。

2. 使用 useRef 同步最新值（适用于定时器等长期运行的任务）

   function MyComponent({ userId }) {
     const userIdRef = useRef(userId);
     useEffect(() => {
       userIdRef.current = userId; // 每次 userId 更新时同步 ref
     }, [userId]);
   
     useEffect(() => {
       const timer = setInterval(() => {
         console.log(userIdRef.current); // 始终获取最新值
       }, 1000);
       return () => clearInterval(timer);
     }, []); // 仅挂载/卸载时执行
   }
   

3. 使用函数式更新或回调引用（如 useEvent RFC 提案）
   在 React 18+ 中，可考虑使用 useEvent（尚未正式发布）或通过自定义 Hook 封装逻辑。

核心原则：

• 依赖数组必须包含 effect 中用到的所有响应式值（props、state、函数等）。
• 若需在 effect 中访问最新值但又不想频繁触发 effect，可结合 useRef 作为“可变容器”。
• 避免“撒谎”——即 effect 使用了某个变量却未将其加入依赖数组，这是闭包陷阱的根源。