reactjs - ComponentWillUnmount 与 React Hooks 等效，可以访问状态变量的当前值？

Question

我正在尝试构建一个带有钩子(Hook)的功能组件，它调用一个函数 卸载时只有一次 .在这个函数中，我需要访问组件 当前状态变量 .

This codesandbox illustrates the core problem I'm facing

我知道我可以在 useEffect 依赖数组中传递状态变量，但在我的实际示例中，要求仅在组件卸载时调用一次效果，并将其添加到数组中会导致它被调用每次渲染。

我还尝试了对 state 变量的 useCallback、useRef 并搜索了类似的用例和示例，但没有成功，我觉得我错过了一些东西。

有没有办法满足这两个要求(只调用一次并访问当前状态变量)？

这也是我的示例代码。按钮安装/卸载计数器，我想要实现的是，计数器的最后一个值在消失时打印。

import * as React from "react";
import "./styles.css";
import { useState, useEffect } from "react";

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

  useEffect(() => {
    return () => {
      // this should print the counters current value
      console.log("Count was " + count + " when counter disappeard!");
    };
  }, []); // Empty because effect should only run when component unmounts

  const handleClick = () => {
    setCount(count + 1);
  };

  return <button onClick={handleClick}>{count}</button>;
};

export default function App() {
  const [showCounter, setShowCounter] = useState(true);

  // mount/unmount the counter
  const handleClick = () => {
    setShowCounter(!showCounter);
  };

  return (
    <div className="App">
      <button onClick={handleClick}>Show/Hide counter</button>
      {showCounter && <Counter />}
    </div>
  );
}

如果有人知道解决这个问题的方法，我会很高兴。

Answer 1

另一种解决方案是将状态保存在 ref 中，并有一个单独的 useEffect 钩子(Hook)，当状态改变时更新 ref。然后您可以通过 ref 对象访问“最后”状态。

例子:
https://codesandbox.io/s/trusting-diffie-8tiev