react hooks useEffect的capturevalue？

Question

在项目中遇到一个这个使用场景，就是在离开编辑页面的时候，暂存表单的数据。
然后我就想到了useEffect 模拟类组件里面的componentWillUnmount

 useEffect(() => {
     // let values: any = await validateFields();
     // const values = form.getFieldsValue();
    //return () => willUnmount(values)
    !loadingFlag && return () => willUnmount()
   }, [loadingFlag])

一开始我依赖是空数组，但是因为useEffect有captureValue 拿不到最新的表单数据。后来我又加上了一个是否页面加载完成的依赖但是还是不能在完全加载完成时获取编辑页面从接口返回初始化的数据。
而且这个return执行时机好像是组件卸载之后执行并不是像我想的willUnmount时机。因为在方法里面那antd from表单的form实例打印出来是个空对象。说明这时组件已经卸载了。

我想问一下，hooks不能百分百实现类组件里面的componentWillUnmount生命周期吗，useeffect那个闭包真的好烦啊😂

Answer 1

我的建议是，当用户修改时，保存表单信息，因为函数组件没什么好办法模拟 componentWillUnmount，或者可以改用类组件，其实有些组件用类组件的方式会舒服多，虽然多写很多 this，但不用被 useEffect 的依赖和闭包折磨。

有一种方法可以解决依赖闭包问题，就是用 ref，举个栗子：

const [value, setValue] = useState('')
const valueRef = useRef(value)
valueRef.current = value

然后就可以拿着这个 ref 去玩了。当然，在父级作用域定义一个变量也能起到同样的效果。