React自定义同步状态Hook - 详解

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

import React, { useState, useEffect, useRef, useCallback } from 'react';
// 自定义同步状态Hook
function 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