React 同步获取 useState 的最新值

一、问题案例

function App() {
const [count, setCount] = useState(0);

const handleClick = () => {
setCount(2);
fn(); // 点击后打印 0
};

const fn = () => {
console.log(count);
};

return (

点击

);
}

二、原因分析

1.为什么在 fn 中打印出来的 count 是 0 呢？
因为 React 合成事件中，为了减少 render 次数，提高性能，React 会将多次状态更新收集起来，最后一次更新，所以在 React 合成事件中，状态更新是异步的，fn 和 setCount 在同一个宏任务中，这时候 React 还没有 render，所以获取到的 count 还是上一次闭包里的值 0。

三、解决思路

1.通过传参的形式，将最新的值，传递给 fn
2.render 之后，在 useEffect 中获取
3.自定义一个 hook useSyncCallback

四、useSyncCallback 代码实现

import { useEffect, useState, useCallback } from 'react'

const useSyncCallback = callback => {
const [proxyState, setProxyState] = useState({ current: false })
const [params, setParams] = useState([])

const Func = useCallback((...args) => {
setParams(args)
setProxyState({ current: true })
}, [proxyState])

useEffect(() => {
if (proxyState.current === true) setProxyState({ current: false })
}, [proxyState])

useEffect(() => {
proxyState.current && callback(...params)
})

return Func
}

export default useSyncCallback

---

使用 useSyncCallback

function App() {
const [count, setCount] = useState(0);

const handleClick = () => {
setstate(2);
fn(); // 打印 2
};
/** 将fn的方法传递给 useSyncCallback 然后返回一个新的函数 */
const fn = useSyncCallback(() => {
console.log(count);
});

return (

点击

);
}

export default App;

参考文献

• Segmentfault