React 18 自定义 Hook 获取 useState 最新值

原理:通过同步更新 useRef  来获取最新值

// util.ts
export const useRefState = (init: any = null) => {
	const [state, setState] = useState(init);
	const stateRef = useRef(init);
	const setProxy = (newVal: any) => {
		stateRef.current = newVal;
		setState(newVal);
	};
	const getState = () => stateRef.current;
	return [state, setProxy, getState];
};

使用:

import { useRefState } from "util"

const [state, setState, getState] = useRefState(0)

state // state 值,变动后更新DOM
setState // setState,变动 state
getState() // 获取最新值

 

posted @ 2024-07-03 14:08  SKILL·NULL  阅读(86)  评论(0编辑  收藏  举报