如何在“ useEffect”挂钩中获取最新的组件变量值？

Question

如何在每个“ useEffect”中使用变量的更新值（在组件范围内声明）？

import React, { useState, useEffect } from 'react';

export default function Count() {

    const [count, setCount] = useState(0);

    let a = 10;

    useEffect(() => {
        console.log('after 1st render', a);
        a++;
        console.log(a);
        return () => { console.log('cleanup - on unmount.') }
    }, [a]);

    useEffect(() => {
        console.log('only when count changes', a);
        a++;
        return () => { console.log('count cleanup', a) }
    }, [count, a]);

    return <div>
        <p>Count : {count}</p>
        <button onClick={() => { console.log('at global', a); setCount(count + 1) }}>Click</button>
    </div>
}

  

输出
  1次渲染后10
  11
  仅当计数改变11
  在全球12位
  计数清理12
  仅当计数改变10

现在，我从此输出中无法理解的是最后一行输出'a'的值为10。

每次调用useEffect时，都会创建提供的函数的新副本，并且还调用cleanUp函数对吗？。

当我单击按钮时，计数发生变化，将调用先前的cleanUp并清除“ useEffect”行为，该行为将“ a”的值从11设置为12，然后将当前的“ useEffect”设置为值10。应该打印值11。任何人都可以澄清一下。

Answer 1

在每个渲染上，所有Count主体均被执行，因此通过单击按钮更改状态将导致调用let a = 10并重置a的值。

换句话说，局部变量a的生存期是直到下一次渲染。

要获得所需的行为，请尝试使用带有useRef的引用。

  

useRef返回一个可变的ref对象，其.current属性为   初始化为传递的参数（initialValue）。返回的对象   将在组件的整个使用期限内保持不变。

const [count, setCount] = useState(0);

const aRef = useRef(10);
let a = 10;

useEffect(() => {
  console.log("after 1st render", a);
  a++;
  aRef.current++;
  console.log(a);
  return () => {
    console.log("cleanup - on unmount.");
  };
}, [a]);

useEffect(() => {
  console.log("only when count changes", a);
  console.log("only when count changes - ref", aRef.current);
  a++;
  aRef.current++;
  return () => {
    console.log("count cleanup", a);
  };
}, [count, a]);

结果：

  

仅当计数更改时   10

     

仅当计数更改时-参考   12