背景

不应用hook时,咱们能够在setState回调函数获取最新值

应用react hook时,最新的值只能在useEffect外面获取

但咱们有时候的业务场景须要咱们同步拿到变量的最新变动值,以便做下一步操作;

这时咱们能够封装一个hook通过联合useRef通过回调函数来拿到最新状态值。

代码

import { useEffect, useRef, useState } from 'react';/** * 自定义 useState * @param state * @returns */const useSyncState: any = (state: any) => {  const cbRef: { current: any } = useRef();  const [data, setData] = useState(state);  useEffect(() => {    cbRef.current && cbRef.current(data);  }, [data]);  return [    data,    (val: any, callback: any) => {      cbRef.current = callback;      setData(val);    },  ];};export default useSyncState;

应用

const [data,setData] = useSyncState(0);setData(1, function (data) {    console.log("我是最新的值:", data);})