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如何修改循环数组对象的数据

    react如何修改循环数组对象的数据

    这篇文章主要介绍了react如何修改循环数组对象的数据问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • 解决React报错React Hook useEffect has a missing dependency

    解决React报错React Hook useEffect has a missing dependency

    这篇文章主要为大家介绍了解决React报错React Hook useEffect has a missing dependency,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • ReactNative支付密码输入框实现详解

    ReactNative支付密码输入框实现详解

    这篇文章主要为大家介绍了ReactNative支付密码输入框实现详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • 作为老司机使用 React 总结的 11 个经验教训

    作为老司机使用 React 总结的 11 个经验教训

    这篇文章主要介绍了作为老司机使用 React 总结的 11 个经验教训,需要的朋友可以参考下
    2017-04-04
  • 关于react-router中的Prompt组件使用心得

    关于react-router中的Prompt组件使用心得

    这篇文章主要介绍了关于react-router中的Prompt组件学习心得,Prompt组件作用是,在用户准备离开该页面时, 弹出提示, 返回true或者false, 如果为true, 则离开页面, 如果为false, 则停留在该页面,本文结合示例代码介绍的非常详细,需要的朋友可以参考下
    2023-01-01
  • react-routerV6版本和V5版本的详细对比

    react-routerV6版本和V5版本的详细对比

    React-Router5是React-Router6的前一个版本,它已经被React-Router6取代,React-Router 6是一次较大的重大更新,本文就来介绍一下react-routerV6版本和V5版本的详细对比,感兴趣的可以了解一下
    2023-12-12
  • React组件的创建与state同步异步详解

    React组件的创建与state同步异步详解

    这篇文章主要介绍了react组件实例属性state,有状态state的组件称作复杂组件,没有状态的组件称为简单组件,状态里存储数据,数据的改变驱动页面的展示,本文结合实例代码给大家详细讲解,需要的朋友可以参考下
    2023-03-03
  • React中常用的一些钩子函数总结

    React中常用的一些钩子函数总结

    这篇文章给大家总结了React中常用的一些钩子函数,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-01-01
  • 深入理解React Native核心原理(React Native的桥接(Bridge)

    深入理解React Native核心原理(React Native的桥接(Bridge)

    这篇文章主要介绍了深入理解React Native核心原理(React Native的桥接(Bridge),本文重点给大家介绍React Native的基础知识及实现原理,需要的朋友可以参考下
    2021-04-04
  • 如何使用Redux Toolkit简化Redux

    如何使用Redux Toolkit简化Redux

    redux-toolkit是目前redux官方推荐的编写redux逻辑的方法,针对redux的创建store繁琐、样板代码太多、依赖外部库等问题进行了优化,官方总结了四个特点是简易的/有想法的/强劲的/高效的,总结来看,就是更加的方便简单了
    2022-12-12

最新评论