React自定义hooks同步获取useState的最新状态值方式
作者：区块链（Web3）开发工程师
这篇文章主要介绍了React自定义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);
})总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。