React妙用useRef解决卸载时难以获取最新state问题

适用场景

假设我们有这样的需求：

从后端接口拉取数据之后，如果报错码是500001，保则存当前页面数据，并跳转页面，否则不保存数据并且不跳转。

state能解决问题吗

显然，我们需要在组件中存储一个变量，用于标志在组件卸载时是否需要保存数据。最为常规的是，我们可以使用useState来定义一个变量。

const [isRemain,setIsRemain] = useState(false);

当报错500001时，我们可以将其设置为true，然后跳转：

setIsRemain(true);
replace('/account/api');

在组件卸载时，判断isRemain的值，若为false则清空当前页面数据，否则保留：

useEffect(()=>{
	return ()=>{
		if(!isRemain) 
		dispatch({type:'api_key/update', payload:{ editData:{}}});
	}
},[]);

看起来似乎逻辑通顺，但是问题在于：

isRemain不会及时更新！

原因在于当我们使用useEffect时，当第二个参数为空数组，则表明只会在组件渲染完成时调用一次。return里面的逻辑则将在组件卸载时执行，由于isRemain不是依赖项，因此卸载时不会获取到最新的isRemain值，导致逻辑错误。

那么我们是否可以将isRemain作为依赖项？

不行！这样的话，就不再是只在卸载时执行了。

useRef很好用

若是我们使用useRef就不会有以上难题了。

const remainAddRef = useRef(false);
//---------------------
remainAddRef.current = true;
replace('/account/api');
// ----------------------
useEffect(()=>{
	return ()=>{
		if(!remainAddRef.current) 
		dispatch({type:'api_key/update', payload:{ editData:{}}});
	}
},[]);

这样，我们始终会取到最新的值。