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如何修改循环数组对象的数据问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
解决React报错React Hook useEffect has a missing dependency
这篇文章主要为大家介绍了解决React报错React Hook useEffect has a missing dependency，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要为大家介绍了ReactNative支付密码输入框实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要介绍了作为老司机使用 React 总结的 11 个经验教训,需要的朋友可以参考下2017-04-04
这篇文章主要介绍了关于react-router中的Prompt组件学习心得,Prompt组件作用是,在用户准备离开该页面时, 弹出提示, 返回true或者false, 如果为true, 则离开页面, 如果为false, 则停留在该页面，本文结合示例代码介绍的非常详细，需要的朋友可以参考下2023-01-01
React-Router5是React-Router6的前一个版本,它已经被React-Router6取代,React-Router 6是一次较大的重大更新,本文就来介绍一下react-routerV6版本和V5版本的详细对比,感兴趣的可以了解一下2023-12-12
这篇文章主要介绍了react组件实例属性state,有状态state的组件称作复杂组件,没有状态的组件称为简单组件，状态里存储数据,数据的改变驱动页面的展示，本文结合实例代码给大家详细讲解，需要的朋友可以参考下2023-03-03
这篇文章给大家总结了React中常用的一些钩子函数,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-01-01
深入理解React Native核心原理(React Native的桥接（Bridge)
这篇文章主要介绍了深入理解React Native核心原理(React Native的桥接（Bridge),本文重点给大家介绍React Native的基础知识及实现原理，需要的朋友可以参考下2021-04-04
redux-toolkit是目前redux官方推荐的编写redux逻辑的方法，针对redux的创建store繁琐、样板代码太多、依赖外部库等问题进行了优化，官方总结了四个特点是简易的/有想法的/强劲的/高效的，总结来看，就是更加的方便简单了2022-12-12
最新评论