React自定义同步状态Hook

react 中 useState是一个异步的操作，有时我们更新了数据往往不能够及时拿到最新数据，对每个state进行useEffect进行监听又增加不少代码量，于是我们可以自定义一个同步状态Hook用于及时获取数据

import React, { useState, useEffect, useRef, useCallback } from 'react';// 自定义同步状态Hookfunction useSyncState(initialState: any) {const [state, setState] = useState(initialState);const stateRef = useRef(initialState);const setSyncState = useCallback((newState: any) => {stateRef.current = typeof newState === 'function' ? newState(stateRef.current) : newState;setState(stateRef.current);return stateRef.current; // 返回最新值}, []);// 保持ref同步useEffect(() => {stateRef.current = state;}, [state]);return [state, setSyncState, stateRef];}

使用起来也很简单：

const [loading, setLoading, loadingRef] = useSyncState(false);// 设置状态
setLoading(true)//获取最新数据
console.log(loading) //因为异步更新可能导致打印出来为false
console.log(loadingRef.current) // true