useReactive 是否可以跳过 useEffect 的闭包问题?

[vaynevayne]

const state = useReactive({
    count: 0,
    inputVal: '',
    obj: {
      value: '',
    },
  });

const fetchData = ()=>{
console.log(state.count) // 这里是 1 还是 0?
}


useEffect(()=>{
state.count = 1
fetchData()
},[])

[liuyib]

// 这里是 1 还是 0?
答：1

先上结论：如果只是为了解决闭包问题，可以直接使用 useRef，没必要用 useReactive。

细说 useReactive:

其实 useReactive 约等于 useRef + proxy + useUpdate

所以你这里 state.count = 1 更新后能立即在 fetchData 中拿到最新的值，是 useRef 的功劳，因此如果只是为了解决闭包问题，直接用 useRef。用 useReactive 跳过闭包，属于超出设计范畴了，可能有预期之外的效果，不建议。

另外，useReactive 配合 useContext 时更新渲染有问题，不建议过度依赖 useReactive 这个 hook。

[vaynevayne]

我的场景是管理系统中的 crud
假如state.count表示的是 page, 这个 page 还需要可以作为状态使用, 比如给
<Pagination page={state.count} onChange=val => state.count = val>

这个使用 useRef 是不行的, 这个场景是使用useReactive 是不是比较好?
我好像之前问过你这个问题 #2316
你说把 page 作为参数传进 fetch, 我是觉得 react 中有状态,就应该想办法利用起来,这是我想使用useReactive的目的 ,为了避免传参
你觉得可行吗?

[liuyib]

具体可不可行，要看你实际测试有没有 bug 了，没问题的话当然可以用。

useReactive 这玩意返回的值，别跨组件一层层传，理论上就没问题。

[vaynevayne]

ok