React useEffect 清理仅在卸载时

Question

我想在组件卸载时触发警报，如下所示：

const [checked, setChecked] = useState(false);
useEffect(() => {
return () => {
if(checked) alert("Hi")
};
}, []);
...

但是，效果在更改时不会更新checked状态。但是，当将依赖项从[]更改为[checked]时，可以解决此问题。但是，这会在每次渲染时触发警报，而不是在卸除时触发警报。但我只想在下马时触发它。如何使用反应钩子完成此操作？

Answer 1

您可以将 checked 的最新值存储在 ref 中，然后从 useEffect 访问它。

const [checked, setChecked] = useState(false);
const checkedRef = useRef(checked);
useEffect(() => {
checkedRef.current = checked;
}, [checked]);
useEffect(() => {
return () => {
if (checkedRef.current) alert("Hi");
};
}, []);

由于 refs 不会触发更新，因此第二个 useEffect 将只运行一次， 但是第一次使用效果将确保checkedRef.current具有最新值。