在React useEffect钩子中引用过时的状态

在React useEffect钩子中引用过时的状态

我尝试对useEffect挂钩执行相同的 *** 作，但是在useEffect的返回函数中状态似乎不正确。

其原因是由于关闭。闭包是函数在其范围内对变量的引用。

useEffect

挂载组件时，您的回调仅运行一次，因此返回回调引用的初始计数值为0。

这里给出的答案就是我的建议。我建议@Jed
Richard将答案传递

[count]

给

useEffect

，它的作用是

localStorage

仅在计数更改时才写入。这比在每次更新中完全不传递任何内容的方法要好。除非您非常频繁地更改计数（每隔几毫秒），否则就不会出现性能问题，并且

localStorage

每当

count

发生更改时都可以写入。

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

如果您坚持只写

localStorage

卸载文件，则可以使用一个丑陋的hack /解决方案-
参考。基本上，您将创建一个在组件的整个生命周期中都存在的变量，您可以从组件中的任何位置进行引用。但是，您必须手动将状态与该值同步，这非常麻烦。引用不会给您上述关闭问题，因为引用是一个具有

current

字段的对象，多次调用

useRef

将返回相同的对象。只要您更改该

.current

值，您

useEffect

就可以始终（仅）读取最新的值。

CodeSandbox链接

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/[email protected]/umd/react.development.js"></script><script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script><div id="app"></div>