原理:通过同步更新 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() // 获取最新值

React 18 自定义 Hook 获取 useState 最新值的更多相关文章

  1. hibernate4.3 无法获取数据库最新值

    在用ssh框架的时候遇到一个问题(hibernate版本号4.3) 问题描写叙述:web端和应用程序都能够读写数据库.当应用程序改动数据库后.hibernate无法读取最新值,读出来的一直都是旧数据. ...

  2. React教程:4 个 useState Hook 示例

    摘要: React示例教程. 原文:快速了解 React Hooks 原理 译者:前端小智 到 React 16.8 目前为止,如果编写函数组件,然后遇到需要添加状态的情况,咱们就必须将组件转换为类组 ...

  3. [Jacky] 解决Ext.Net GridPanel 选择的行数据刷新后不能获取最新值

    选择GridPanel中一行数据,当变更数据时并重新刷新之后不能获取最新值,需通过如下方式获取: var internalId = gridPanel.getSelectionModel().getL ...

  4. C#提高--------------获取方法返回值的自定义特性(Attribute)

    .NET(C#):获取方法返回值的自定义特性(Attribute) 转载 2013年05月08日 10:54:42 1456 来自:http://www.cnblogs.com/mgen/archiv ...

  5. 自定义注解获取请求Header中的值

    前言 这几天开发一个项目,为了方便,前台将当前登陆人的ID和名称放在每个请求的Header中(这里不考虑安全性之类的),这样后台只要需要用到,就直接从Header中get出来就可以了. 后台实现方法 ...

  6. React+DvaJS 之 hook 路由权限控制

    博客 学院 下载 GitChat TinyMind 论坛 APP 问答 商城 VIP 活动 招聘 ITeye 写博客 发Chat 登录注册 原 React+DvaJS 之 hook 路由权限控制 20 ...

  7. 关于为什么使用React新特性Hook的一些实践与浅见

    前言 关于Hook的定义官方文档是这么说的: Hook 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性. 简单来说,就是在 ...

  8. 转贴:获取元素CSS值之getComputedStyle方法熟悉

    获取元素CSS值之getComputedStyle方法熟悉 一.碎碎念~前言 我们都用过jQuery的CSS()方法,其底层运作就应用了getComputedStyle以及getPropertyVal ...

  9. react新特性hook

    一.hook示例.   import React, { useState } from 'react'; function Example() { // 声明一个叫 “count” 的 state 变 ...

  10. RadGrid使用技巧:从RadGrid获取绑定的值

    本文主要介绍从RadGrid获取绑定的值,仅适用于Telerik RadControls for asp.net ajax. 获取方式 RadGrid把绑定的值存储在VIewState中,即使View ...

随机推荐

  1. 3568F-翼辉SylixOS国产操作系统演示案例

     

  2. 3568F-Qt工程编译说明

  3. 国产芯片!EtherCAT主站和瑞芯微RK3568融合,引领智能化升级!

    转载自:北京盟通科技 盟通成果 随着工业智能化的迅猛推进,国产芯片作为我国自主创新的重要成果,正逐渐崭露头角.在实现工业智能化的过程中,EtherCAT主站技术的应用也愈发重要.盟通此次将瑞芯微国产开 ...

  4. GuavaCache、EVCache、Tair、Aerospike 缓存框架比较

    Guava Cache.EVCache.Tair.Aerospike 是不同类型的缓存解决方案,它们各有特点和应用场景.下面我会逐一分析这些缓存系统的优势.应用场景,并提供一些基本的代码示例. Gua ...

  5. SpringBoot连接数据库的方式

    1.Spring集成的服务 直接通过注入方式使用,如redis,jdbc等等服务. spring: redis: host: localhost port: 6379 password: 123456 ...

  6. javascript深入参数传递

    我们都知道javascript的基础数据类型有: Undefined . Null . Boolean . Number . String . 如果从一个变量向另一个变量复制基本类型的值,会在变量对象 ...

  7. PHP7新特性之类型声明

    今天我在这里总结下PHP7主要的新特性. 1.类型声明 做过php开发的小伙伴们都知道,php7以前的版本变量是不需要声明类型的,函数返回值也是不需要声明类型的,总之,在我们的脑海中就没有这么回事.可 ...

  8. <el-table-column prop="item_no" label="料号"/>设置最小宽度

    可以通过min-width属性来设置el-table-column的最小宽度.以下是一个示例: <template> <el-table :data="tableData& ...

  9. System.NotSupportedException:“无法显式设置 SplitterPanel 的高度。改在 SplitContainer 上设置 SplitterDistance。”

    System.NotSupportedException:"无法显式设置 SplitterPanel 的高度.改在 SplitContainer 上设置 SplitterDistance.& ...

  10. P2427 题解

    洛谷链接 题目简述 给定 \(N \times M\) 的字符矩阵,有 \(Q\) 次询问,对于每次询问给出 \(x,y\),求以 \((x,y)\) 为中心的最大正方形边长且正方形中字符均相同. 思 ...