栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

为什么调用setState方法不会立即改变状态?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

为什么调用setState方法不会立即改变状态?

原因是
setState是异步

state
setState
,如果要使用
callback
方法检查值,则不能紧随在之后的更新值。传递一个方法作为回调,该方法将在
setState
完成其任务后执行。

为什么setState是异步的?

这是因为

setState
更改
state
并导致重新渲染。这可能是一项昂贵的操作,并且
synchronous
可能会使浏览器无响应。因此,可以对
setState
调用进行
asynchronous
批处理,以提高UI体验和性能。

从 文档

setState()不会立即使this.state突变,而是创建一个挂起的状态转换。调用此方法后访问this.state可能会返回现有值。无法保证对setState的调用的同步操作,并且可能为提高性能而对调用进行批处理。

将回调方法与setState一起使用:

要在

state
之后检查更新后的值
setState
,请使用如下回调方法:

setState({ key: value }, () => {     console.log('updated state value', this.state.key)})

检查一下:

class NightlifeTypes extends React.Component {   constructor(props) {      super(props);      this.state = {         barClubLounge: false,         seeTheTown: true,         eventsEntertainment: true,         familyFriendlyOnly: false      }   }   handleonChange = (event) => {  // Arrow function binds `this`      let value = event.target.checked;      if(event.target.className == "barClubLounge") {         this.setState({ barClubLounge: value}, () => {  //here  console.log(value);  console.log(this.state.barClubLounge);  //both will print same value         });      }   }   render() {      return (          <input className="barClubLounge" type='checkbox' onChange={this.handleOnChange} checked={this.state.barClubLounge}/>      )   }}ReactDOM.render(<NightlifeTypes/>, document.getElementById('app'))<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><div id='app'/>


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/614666.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号