关于react.js:自定义hooks-同步获取useState的最新状态值

背景

不应用 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);
})