如何在 '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>
}

output
after 1st render 10
11
only when count changes 11
at global 12
count cleanup 12
only when count changes 10

现在，我从这个输出中不明白的是最后一行将 'a' 的值输出为 10。

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

当我单击按钮时，计数会发生变化，调用之前的清理并清理 'useEffect' 行为，该行为将 'a' 的值从 11 设置为 12，然后是当前的 'useEffect' 用值 10 调用。它应该打印值 11。 ?谁能澄清一下。

Answer 1

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

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

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

useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.

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]);

结果：

only when count changes 10

only when count changes - ref 12

在 uses of useEffect

阅读更多内容

如何在 'useEffect' 钩子中获取最新的组件变量值？

How to get latest component variable value in 'useEffect' hook?

javascript

reactjs

react-hooks