React 同步获取 useState 的最新值

一、问题案例

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

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

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

  return (
	<div className="App">
	  <button onClick={handleClick}>点击</button>
	</div>
  );
}

二、原因分析

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 (
	<div className="App">
	   <button onClick={handleClick}>点击</button>
	</div>
  );
}

export default App;

参考文献

• Segmentfault