解决react setState延迟执行

react setState延迟执行不立即更新总结


this.setState((prevState,props))

1.语法:setState()可以接收一个函数,这个函数接受两个参数,第一个参数表示上一个状态值,第二个参数表示当前的props。

2.setState()方法更类似一种请求而非一种立即更新组件的强制性命令,
为了更好地性能与某些情况(比如正在输入文本框页面因为来一条消息直接将文本框内容重新渲染了)
React会延迟调用它,不会保证state的变更会即刻执行,而是会批量推迟更新。

3.何时同步何时异步:
①由react控制的事件处理程序,生命周期函数调用setState不会同步更新state。
②鼠标事件、键盘事件、表单事件、窗口事件、触摸事件中react封装绑定的事件中的setState({"":""})都是异步处理的。

4解决办法。
①this.setState((prevState,props))
②在函数中直接调用回调函数,this.setState({“name”:0},()=>{console.log(this.state.name)})
③改成全局变量

举个栗子

import React from 'react';
class NavigaBtn extends React.Component {
    constructor(props) {
        super(props);
        this.toleftcc = this.toleftcc.bind(this);
        this.torightcc = this.torightcc.bind(this);
        this.state = {
            "ncindex": 0,"isToggleOn":false, "fuserinfo":
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值