V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
FaiChou
V2EX  ›  React

React effects 的闭包里锁定 state 值是怎么实现的?

  •  
  •   FaiChou ·
    FaiChou · 2022-02-23 21:21:43 +08:00 · 1870 次点击
    这是一个创建于 764 天前的主题,其中的信息可能已经有所发展或是发生改变。
    function Page() {
      const [a, setA] = React.useState(0);
      useEffect(() => {
        const interval = setInterval(() => { console.log(a) }, 2000)
        return () => clearInterval(interval)
      }, []);
      return (
        <div>
          <span>{a}</span>
          <button title="update" onPress={() => setA(Math.random())} />
        </div>
      );
    }
    

    不管如何点击按钮, 打印的都是初始值 0.

    看过的一些资料, 都说是capture外部的数据.

    但是始终想不明白, 当一个变量找不到时, 会去上一层 scope 里查找, 所以应该是找的到最新数据的, 比如将代码改成:

    function Page() {
      let a = 0;
      useEffect(() => {
        const interval = setInterval(() => { console.log(a) }, 2000)
        return () => clearInterval(interval)
      }, []);
      return (
        <div>
          <button title="update" onPress={() => a++} />
        </div>
      );
    }
    

    当捕获的变量不是一个 state 时候, 它就可以打印最新的值.

    我自己写了一个简单实现:

    const hooks = [];
    function useState(val) {
      let state = hooks[0] || val;
      hooks[0] = state;
      function setVal(v) {
        state = v;
        hooks[0] = state;
      }
      return [state, setVal];
    }
    let cleanup = null;
    function useEffect(callback) {
      if (cleanup) cleanup()
      cleanup = callback();
    }
    function Foo() {
      const [count, setCount] = useState(0);
      useEffect(() => {
        setTimeout(() => { console.log(count)}, 1000);
      })
      return setCount;
    }
    var setCount = Foo(); // log 0
    setCount(1);
    Foo(); // log 1
    

    但这肯定不是 react 的实现, 具体实现也没有搞懂, 所以就想问问, 这里用的什么方式处理的?

    9 条回复    2022-02-24 09:23:37 +08:00
    zzuieliyaoli
        1
    zzuieliyaoli  
       2022-02-23 21:26:03 +08:00   ❤️ 1
    dcsuibian
        2
    dcsuibian  
       2022-02-23 21:35:11 +08:00
    说一下我的猜测,仅仅是猜测:
    第一种写法:
    在第 1 次渲染的时候,也就是 Page 函数第一次调用的时候,假设 a 代表的是计算机地址 0x12345678 ,里面装的内容是数字 0 。而在你 setA(Math.random())之后,第二次调用 Page 函数,这时候虽然变量名还是 a ,不过地址变了,例如 0x23456789 ,里面装着内容 1 。而那个箭头函数里的 a 实际上取了 0x12345678 的内容

    第二种写法,假设 a 还是代表地址 0x12345678 ,由于你写的是 a++,那么在你按下按钮的时候,0x12345678 里的内容就变成 2 了,而函数里 a 指的是 0x12345678 ,取出的值自然就变了
    joesonw
        3
    joesonw  
       2022-02-23 21:57:50 +08:00 via iPhone   ❤️ 1
    useEffect(() => {}, [a])

    没有加 dependency 的时候,里面的 a 是第一次调用 useEffect 的时候的 closure

    要理解原理,搜索 react hook fiber 。大致就是 hook 方法是链表串起来的。避免每次 render 都调用没改变的地方。
    Zhuzhuchenyan
        4
    Zhuzhuchenyan  
       2022-02-23 22:37:38 +08:00
    简单翻了一下,粗浅的理解是`<span>{a}</span>`中的{a}看似是一个闭包捕获,但其实本质上是函数调用`React.createElement("span", null, a)`中的一个形参
    于是在后续逻辑中` <span>{a}</span>`中的 a 和`setInterval(() => { console.log(a) }, 2000)`中的 a 基本上没有任何关系,产生上文所说结果就是很自然的了
    FaiChou
        5
    FaiChou  
    OP
       2022-02-23 22:47:25 +08:00
    @zzuieliyaoli Dan 的这篇我看了, 只是说了下这个现象, 并没有讲是怎么实现的.
    FaiChou
        6
    FaiChou  
    OP
       2022-02-23 22:50:51 +08:00
    @dcsuibian 这和 a++ setA(Math.random()) 没关系...
    sweetcola
        7
    sweetcola  
       2022-02-23 23:13:40 +08:00
    我写了个小 Demo 来展示这种差异(变量名请无视...)
    ```JavaScript
    var t = (() => {
    let num = 1;
    let cb = undefined;
    let cbUpdated = false;
    return {
    a:()=>([num, (n) => { num = n; }]),
    b:(c) => {
    if (!cbUpdated) {
    cbUpdated = true;
    cb = c;
    }
    cb()
    }
    }
    })();
    var f = () => {
    let [a, setA] = t.a();
    let b = 1
    t.b(() => setInterval(() => {console.log(a, b);}, 1000))
    return {
    tt: () => {
    let newNum = Math.random()
    setA(newNum)
    b = newNum
    }
    };
    }
    var tmp = f()
    ```
    在控制台粘贴以上代码后可以看到输出了"1 1",这个时候输入 tmp.tt() 后会变成 "1 Math.random()"。也就是 state 没有变。但是你就算再次执行 f 函数,输出的 state 依然会是 1 ,因为代码中的 cb 并没有被更新。

    这时就需要让 cb 更新来让 t.b 获取新 state ,也就是 useEffect 的 dependencyList 。把上面代码的 b 函数改成:
    ```
    b:(c) => {
    cb = c
    cb()
    }
    ```
    后再次执行 f 函数可以看到成功输出新 state 了。这种特性存在于“闭包中的闭包”。这就是 Hooks 的奥秘,整个 React-Hook 可以理解成一个大闭包。(不知道有没有说错...)
    dablwow
        8
    dablwow  
       2022-02-24 09:17:01 +08:00
    这就是一个最直白的闭包问题。

    两个点:
    一是
    ```<button title="update" onPress={() => setA(Math.random())} />```

    这里的 setA 会触发 re-render ,因此函数首次执行生成的 a ,始终都是初始值——0 ;而定时器读取的都是这个 a ,后续渲染的 a ,这里读不到。


    二是,useEffect 的 dependencies 传了空数组,因此 useEffect 内的函数只有首次渲染会执行。
    尽管 a 的值在后续渲染中的确改变了,但没执行定时器,也就无法打印。

    可以把 dependencies 去掉,变成每次都执行,打印结果就会显示最新的 a 了(尽管还是会混杂旧的 a )
    dablwow
        9
    dablwow  
       2022-02-24 09:23:37 +08:00
    用一个能改变的例子作对比,可以更好地理解:

    首先 a 由常量改为变量:
    ```let [a, setA] = React.useState({ value: 0 });```

    其次设置时不要走 set 函数,直接修改:
    ```<button title="update" onPress={() => a = Math.random() } />```

    这样定时器就能打印最新的 a 了。为啥?因为这时候 useEffect 生成的闭包中,a 变了。而题目的例子,a 没变,变的是第二 /三 /n 的 a
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3319 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 13:34 · PVG 21:34 · LAX 06:34 · JFK 09:34
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.