react 新手关于 react useEffect 的困惑，为什么 useEffect 里面的 cleanup 函数里面的 props 是旧的，如何从源码解释？

[ooo4]

版本： react@18.3.1

我看源码就是先 UnmountEffects 后 MountEffects,里面也只是递归遍历而已，为什么 cleanup 里面的 props 是上一次的了？

commitPassiveUnmountEffects(root.current);
commitPassiveMountEffects(root, root.current, lanes, transitions);

// 复现的 demo
function App() {
  const [num, setNum] = useState(100)
  window.__setNum = setNum
  return <Comp num={num}></Comp>
}

function Comp(props) {
  debugger
  useEffect(() => {
    debugger
    props // {num:1000}
    return () => {
      debugger
      // 为什么这里是旧的 props? {num:100}
      props
    }
  }, [props.num])
  return (
    <p>
      <span>{props.num}</span>
    </p>
  )
}

setTimeout(() => {
  __setNum(1000)
}, 1000)

[shintendo]

闭包

[lisongeee]

新状态组件的 useEffect 和旧状态组件的 cleanup 同时被你 debugger 到了

[ooo4]

@shintendo 从 chrome 的 debugger 工具看，这个 props 确实是来源于闭包，thanks!!

[ltaoo1o]

我这里也有一个闭包的问题，https://codesandbox.io/p/sandbox/zuo-yong-yu-de-wen-ti-kvt3jp?file=%2Fsrc%2FApp.js

react 的函数组件让人恼火，各种潜在的问题

[Razio]

@ltaoo1o #4 你比 OP 还新手

[ltaoo1o]

@Razio 可以详细说说吗，不要只输出态度..

[Torpedo]

@ltaoo1o #4 就是闭包的问题。每次组件状态变化，函数都会执行一次。所以最新的状态都在最新的一次执行里。但是这里你 keydown 监听的是第一次函数运行的函数。那个函数的闭包上下文里，state 是最初的。

新手不要直接用 useEffect 。找个 react-use ahook 啥的。用封装好的 hook 。无论什么水平，写的好的话，需要手写 useEffect 的很少

[shintendo]

@ltaoo1o 你这个我觉得无解，可行的解法你自己注释里都写了
或者干脆就从 dom 里拿 v

[hyh0u0]

（变量）代码在写下来的时候就被捕获了。或者说，在这个函数的生命周期里，函数内部的那个 props 就只有传入的 props

[TWorldIsNButThis]

@ltaoo1o 注释是啥意思，正确方式就是 ref 或者让 effect 依赖 v 啊

[ltaoo1o]

当时出问题的时候，我就意识到是闭包问题了，百分之九十九函数组件的问题就是闭包问题 🤣

我这个代码，从语义上来说非常简单也很实际，「页面初始化后监听回车事件」，用函数组件就是写不出来，用类组件就没有这种问题。
所以我现在写代码都少用 hook ，它改变了代码作为领域知识的意义，变成为框架去改变业务含义，导致现在都是在写框架代码，不是写业务代码。

[ltaoo1o]

@TWorldIsNButThis 我希望代码表达正确的「语义」

[ltaoo1o]

@shintendo #8 是的，我想了很久，无解

[ltaoo1o]

@Torpedo 感谢 🙏🏻

[shintendo]

@ltaoo1o 你说 v 不能放 useRef 里，那可以把 log 放 useRef 里
https://codesandbox.io/p/sandbox/zuo-yong-yu-de-wen-ti-forked-pn425w

[TWorldIsNButThis]

@ltaoo1o
class 组件可以是因为 this 就是 ref 啊

[ltaoo1o]

@shintendo #15 起作用的是这个刷新 log 函数的代码吧，而且 log 可能是一个比较复杂的函数，它要拿很多个状态进行处理，这里就要依赖 v1 v2 v3 等等，容易漏

```
useEffect(() => {
logRef.current = () => {
alert(v);
};
}, [v]);
```

[ltaoo1o]

@TWorldIsNButThis #16 所以我说函数组件有额外的心智负担，容易出问题，感觉在和框架斗智斗勇 🤣

[ljpCN]

@ltaoo1o 你应该在 input 标签的 onKeyDown 回调里处理你的键盘监听，而不是在 useEffect 里处理

[ltaoo1o]

@ljpCN 实现方式其实很多种，难的是保留语义的前提下。我希望我的代码，别人一看，就能明白是「当页面加载后，监听回车事件并 xxx 」，如果写在 input 标签，就变成了「当这个 input 回车时，xxx 」，这里的语义就丢失了。
当然代码能跑就行，「代码表达语义」仅仅是我个人的追求。