useEffect离开页面记录当前数据的问题

Question

举个例子

const [count, setCount] = useState(0)

// 页面中会改count值

离开页面的时候希望保存当前的count值到localStorage

// 方式一
useEffect(()=>{
    return function(){
        localStorage.set('count', count) 
    }
},[])

方式一的问题是count一直是0。。。。

// 方式二
useEffect(()=>{
    return function(){
        localStorage.set('count', count)
    }
},[count])

方式二的问题是每次更改count，都会执行

希望可以只是页面卸载时才执行的函数，类似生命周期函数componentWillUnmount。应该怎么写？

Answer 1

还有一种情况啊，文档详细写了的。第一个参数的函数有返回值(函数)的时候，该函数会在组件清除的时候执行。一般资源的保存或者释放都是这一步。参见说明

Answer 2

页面离开并不会触发useEffect， 你把它想的功能太强大了。

Answer 3

可以使用 useRef，类似：

const count = useRef(0);

useEffect(() => {
    return {
        localStorage.setItem('count', String(count));
    };
}, [])

// ...

/* 某处更新 count */
count.current += 1;

Answer 4

const [count, setCount] = useState(0);
const countRef = useRef(count);

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

useEffect(() => {
    return () => {
        localStorage.setItem('count', countRef.current);
    }
}, [countRef])