我试图对 useEffect 钩子做同样的事情，但似乎 useEffect 的返回函数中的状态不正确。

其原因是由于关闭。闭包是函数对其作用域内变量的引用。您的useEffect回调仅在组件安装时运行一次，因此返回回调引用的初始计数值为 0。

这里给出的答案是我推荐的。我会推荐 @Jed Richard 的传递[count]to的答案useEffect，它具有localStorage仅在计数更改时写入的效果。这比在每次更新时完全不传递任何内容的方法要好。除非您非常频繁地（每隔几毫秒）更改计数，否则您不会看到性能问题，并且可以localStorage在count更改时写入。

useEffect(() => { ... }, [count]);

如果您坚持只localStorage在卸载时写入，那么您可以使用一个丑陋的黑客/解决方案 - refs。基本上，您将创建一个在组件的整个生命周期中都存在的变量，您可以从其中的任何位置引用该变量。但是，您必须手动将状态与该值同步，这非常麻烦。Refs 不会给你上面提到的闭包问题，因为 refs 是一个带有current字段的对象，多次调用useRef将返回同一个对象。只要您改变该.current值，您useEffect就可以始终（仅）读取最新的值。

代码沙盒链接

const {useState, useEffect, useRef} = React;

function Example() {
  const [tab, setTab] = useState(0);
  return (
    <div>
      {tab === 0 && <Content onClose={() => setTab(1)} />}
      {tab === 1 && <div>Count in console is not always 0</div>}
    </div>
  );
}

function Content(props) {
  const value = useRef(0);
  const [count, setCount] = useState(value.current);

  useEffect(() => {
    return () => {
      console.log('count:', value.current);
    };
  }, []);

  return (
    <div>
      <p>Day: {count}</p>
      <button
        onClick={() => {
          value.current -= 1;
          setCount(value.current);
        }}
      >
        -1
      </button>
      <button
        onClick={() => {
          value.current += 1;
          setCount(value.current);
        }}
      >
        +1
      </button>
      <button onClick={() => props.onClose()}>close</button>
    </div>
  );
}

ReactDOM.render(<Example />, document.querySelector('#app'));

<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

<div id="app"></div>

这将起作用 - 使用 React 的 useRef - 但它并不漂亮：

function Content(props) {
  const [count, setCount] = useState(0);
  const countRef = useRef();

  // set/update countRef just like a regular variable
  countRef.current = count;

  // this effect fires as per a true componentWillUnmount
  useEffect(() => () => {
    console.log("count:", countRef.current);
  }, []);
}

请注意更容易忍受的（在我看来！）用于 useEffect 的“返回函数的函数”代码构造。

问题是 useEffect 在组合时复制了 props 和 state，因此从不重新评估它们 - 这对这个用例没有帮助，但它不是 useEffects 真正的用途。

感谢@Xitang 将引用直接分配给 .current，这里不需要 useEffect。甜的！

您的 useEffect 回调函数显示初始计数，这是因为您的 useEffect 在初始渲染时仅运行一次，并且回调存储在初始渲染期间出现的计数值为零。

在你的情况下你会做的是

 useEffect(() => {
    // TODO: Load state from localStorage on mount
    return () => {
      console.log("count:", count);
    };
  });

在 react docs 中，您会发现为什么这样定义的原因

React 什么时候清理效果？当组件卸载时，React 执行清理。但是，正如我们之前所了解的，效果会在每次渲染时运行，而不仅仅是一次。这就是为什么 React 还会在下次运行效果之前清除上一次渲染中的效果。

阅读react文档 Why Effects Run on Each Update

它确实在每个渲染上运行，要优化它，您可以使其在count更改时运行。但这是useEffect文档中也提到的当前提议的行为，可能会在实际实现中发生变化。

 useEffect(() => {
    // TODO: Load state from localStorage on mount
    return () => {
      console.log("count:", count);
    };
  }, [count]);

另一个答案是正确的。为什么不传递[count]给您的 useEffect，并在count更改时保存到 localStorage ？像这样调用 localStorage 并没有真正的性能损失。