使用依赖项卸载时使用 useEffect 清理答案

【问题标题】：useEffect cleanup on unmount with dependencies使用依赖项卸载时使用 useEffect 清理
【发布时间】：2021-09-08 11:25:47
【问题描述】：

我需要一种方法来仅在组件卸载时运行 React useEffect 清理功能，但使用组件的最新状态。

考虑以下示例：

const [foo, setFoo] = useState(true)

useEffect(() => {
  return () => {
    if(foo) 
      console.log("T") 
    else
      console.log("F")
  }
}, [])

...later:

setFoo(false)

在本例中，即使foo 的当前值为false，卸载时也会打印“T”。

您的第一个想法可能是将foo 添加到效果的依赖数组中，但这会导致效果清理两次：一次是在状态更改为false（打印“T”）时，一次是在组件卸载（打印“F”）。

我希望它只在组件卸载后打印“F”。

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

解决此问题的一种方法是使用useRef，如下所示：

const [foo, setFoo] = useState(true)

// Store value of foo and keep it up-to-date.
const fooRef = useRef(foo)
useEffect(() => fooRef.current = foo, [foo]);

// Use ref value.
useEffect(() => {
  return () => {
    if(fooRef.current) 
      console.log("T") 
    else
      console.log("F")
  }
}, [])

...

setFoo(false)

【讨论】：