React自定义hooks同步获取useState的最新状态值方式
更新时间：2024年03月13日 09:45:37 作者：区块链（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);
})总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
react-native 封装选择弹出框示例(试用ios&android)
本篇文章主要介绍了react-native 封装选择弹出框示例(试用ios&android)，具有一定的参考价值，有兴趣的可以了解一下2017-07-07
这篇文章主要给大家介绍了关于React Native自定义组件与输出方法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-07-07
这篇文章主要介绍了react中如何使用定义数据并监听其值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
这篇文章主要介绍了使用React简短代码动态生成栅格布局的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-05-05
在React中,父组件可以通过props属性向子组件传递数据,子组件可以通过props属性接收父组件传递过来的数据,本文就来介绍一下如何实现,感兴趣的可以了解一下2023-10-10
React 组件中的state和setState()你知道多少
这篇文章主要为大家详细介绍了React组件中的state和setState()，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
map()方法是在React中常用的数组处理方法之一,可以用于遍历数组、生成组件列表以及进行数据转换等操作,通过合理运用map()方法,可以更灵活地处理和展示数据,下面给大家讲解react map使用方法,感兴趣的朋友一起看看吧2023-10-10
react native reanimated实现动画示例详解
这篇文章主要为大家介绍了react native reanimated实现动画示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要介绍了react+antd动态增删表单方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
本篇文章主要介绍了React-intl 实现多语言的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
最新评论