useState 在合成事件中是异步的

合成时间是什么呢

合成事件： 简单来说 比如onClick，或者 onChange 或者说是 Input之类的事件

所以一个情景是这样的

当你在onClick 中这样设置了状态，并赋值上去，但是打印的值是上一次的值。

附代码一份

function App() {
  const [state, setstate]: {} = useState(0);
  const count: number = 0;

  const setT = () => {
    setstate(++count);
    console.log(state)
  };

  return (
    <div>
        <button onClick={setT}>点击+1</button>
	</div>
  );
}

这时候打印出来的state 是0 并不是1

怎么解决呢

我这里使用自定义Hooks 来解决，实现方式是这样

function App() {
  const [state, setstate]: {} = useState(0);
  const count: number = 0;

  // 自定义hooks
  const useSyncCallback = callback => {
    const [proxyState, setProxyState] = useState({ current: false });

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

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

    useEffect(() => {
      proxyState.current && callback();
    });
    return Func;
  };
  
  const func = useSyncCallback(() => {
    console.log(state);
  });

  const setT = () => {
    setstate(++count);
    func()
  };

  return (
    <div>
        <button onClick={setT}>点击+1</button>
	</div>
  );
}

今天是2022年1月31日补充

function App() {
  const [state, setstate]: {} = useState(0);
  const count: number = 0;

  const setT = () => {
    setstate(++count);
    console.log(state, '这里是SetT'); // 这里打印出来的是旧值，获取不到最新的
  };
useEffect(() => {
	console.log(state, '最新的state'); // 这里便能够打印最新的state
}, [state])

  return (
    <div>
        <button onClick={setT}>点击+1</button>
	</div>
  );
}