首页 > 其他分享 >React hooks state刷新不及时

React hooks state刷新不及时

时间:2022-08-15 12:23:13浏览次数:52  
标签:10 console hooks React state const data

状态

 

 

const View:React.FC = (props)=>{

const [data,setDate] = useState<any[]>(0);

 

console.log(data)//10

 

const handleDiv = ()=>{

setDate(10);

console.log(data)//0

}

 

return(

   <div onClick={handleDiv}>值:{data}</div>

  )

}

 

从上面代码中,能看得出来,为什么触发了handleDiv后,上面的console的data值为10,而函数里面的data值为0呢

 

其实,state是异步执行的,所以数据不会及时更新,那么有什么解决的办法呢?

有人说,直接让state从异步改成同步不就好了....貌似可以,但我没试过,哈哈哈

既然用React开发了,那我们可以使用React自带的ref来解决数据更新不及时的问题

有人有会说,ref能解决?啊对对,跳过闲话........

其实React的ref是可以用来存储数据的,那怎么使用呢?看代码

import { Ref } from 'react';

const View:React.FC = (props)=>{

 

const data = Ref();

console.log(data)//undefined 

 

const handleDiv = ()=>{

  data.current = 10;

  console.log(data)//10

}

 

return(

   <div onClick={handleDiv}>值:{data}</div>

  )

}

啊哈,这下又有人问了,为什么data是个undefined嘞

其实啊,未赋值之前打印data,都是undefined,赋值后立马更新数据,多好用

也可以理解为,state用来做异步,Ref用来做同步,舒服的一批也

 

标签:10,console,hooks,React,state,const,data
From: https://www.cnblogs.com/HelloLc/p/16587847.html

相关文章

  • Statefulset+Deamonset控制器实战(简单版本)
    Statefulset说明:  为了解决有状态服务的部署,例如mysql的主从等  pod拥有唯一且固定的名称  按照顺序对pod进行启停、伸缩和回收  HeadlessServices(......
  • React报错之Cannot find namespace context
    正文从这开始~总览在React中,为了解决"Cannotfindnamespacecontext"错误,在你使用JSX的文件中使用.tsx扩展名,在你的tsconfig.json文件中把jsx设置为react-jsx,并确保为你......
  • react+rust+webAssembly(wasm)示例
    前言:WebAssembly(简称wasm)已经出来有几年了,在一些需要高性能的web应用场景中,wasm技术可以让代码执行效率大大提升。react做为目前大厂主流的前端框架之一,搭配上最近几年一......
  • 带着问题看AQS waitState 系列一
    AQS中存在设置waitState状态的方法 shouldParkAfterFailedAcquire,根据问题反推其设计的原因  shouldParkAfterFailedAcquire源码如下   以ReentrantLock为......
  • React生命周期和响应式原理(Fiber架构)
    注意:只有类组件才有生命周期钩子函数,函数组件没有生命周期钩子函数。生命周期装载阶段:constructor()render()componentDidMount()更新阶段:render()compone......
  • state声明式
     如何定义state在类组件中,在constructor()中使用this.state={}来定义classAextendsComponent{constructor(props){super(props)//调用Component的......