文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

React中setState的使用与同步异步的使用

2024-04-02 19:55

关注

在react中,修改状态如果直接使用this.state,不会引起组件的重新渲染,需要通过 this.setState来对组件的属性进行修改。

1、this.setState的两种定义方式

定义初始状态


state = { count: 0 },

如果此时有一个按钮,点击按钮让计数加1,我们可以有两种写法

(1)传递对象


this.setState({ count: this.state.count + 1})

(2)传递函数


this.setState((state, props) => ({ count: count + 1}))

2、setState的两种方式有什么不同?

如果变更的state的值需要依赖于上一次的state的值,这种情况就需要用到函数的形式,比如以下这种情况


addCount(){
  this.setState({ count: this.state.count + 1})
  this.setState({ count: this.state.count + 1})
  this.setState({ count: this.state.count + 1})
}

此时只会执行一次+1的操作,因为在React内部,会将多次setState合并操作,新的state由 Object.assgin({}, {count: 0},  { count: 1}) 合并所得,以上赋值会执行三次,但因为count的值没有更新,所以最终执行的结果只+1,如果setState的赋值是函数,那情况就不一样了


addCount(){
  this.setState((state, props) => ({ count: count + 1}))
  this.setState((state, props) => ({ count: count + 1}))
  this.setState((state, props) => ({ count: count + 1}))
}

这样的操作会得到+3的效果,因为React会进行判断,如果传入的是函数,那么将执行此函数,此时count的值就已经被修改了

3、setState是同步还是异步的?

☆☆☆☆☆ 是异步的

(1) 即我们通过this.setState修改了状态之后,在它的下一行输出state的值并不会得到新的值

(2) 为什么是异步?

有两个原因,一是提高效率,每次修改state的值都会造成render的重新渲染,将多次修改state的值合并统一更新可以提高性能;二是render的更新会晚一些,如果render中有子组件,子组件的props依赖于父组件的state,props和state就不能保持一致

(3) 如何获取异步时的state值?
① 在setState的回调函数中


this.setState({ 
  count: this.state.count + 1}}, 
  ()=>{ console.log(this.state.count)})

② 在componentDidUpdate中获取


componentDidUpdate(){
  console.log(this.state.count)
}

☆☆☆☆☆ 是同步的

(1) 即我们通过this.setState修改状态之后,在它的下一行输出state是新的值

(2) 什么场景下是同步的?
① 原生js获取dom元素,并绑定事件


<button id="addBtn">点我+1</button>
componentDidMount(){
   const addBtn = document.getElementById('addBtn')
   changeBtn.addEventListener('click',()=>{
       this.setState({ count: this.state.count + 1})
       console.log(this.state.message)
   })
}

② 计时器 setTimeout


<button onClick={ e => this.addOne() }>点我+1</button>
addOne(){
setTimeout(()=>{ this.setState({ count: this.state.count + 1 })
 console.log(this.state.count ) },0)
}

到此这篇关于React中setState的使用与同步异步的使用的文章就介绍到这了,更多相关React setState同步异步内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯