React中setState同步和异步怎么实现
这篇文章主要介绍“React中setState同步和异步怎么实现”,在日常操作中,相信很多人在React中setState同步和异步怎么实现问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”React中setState同步和异步怎么实现”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
主要从事网页设计、PC网站建设(电脑版网站建设)、wap网站建设(手机版网站建设)、响应式网站、程序开发、微网站、微信小程序等,凭借多年来在互联网的打拼,我们在互联网网站建设行业积累了丰富的网站建设、做网站、网络营销经验,集策划、开发、设计、营销、管理等多方位专业化运作于一体,具备承接不同规模与类型的建设项目的能力。
1.在React中,由React控制的事件处理函数,如onClick, onChange等,setState是异步的
import React, { Component } from 'react'; export default class Input extends Component { constructor(props) { super(props); this.state={ name: 'hello' } } _onChange(e) { this.setState({ name:' world' }) console.log(this.state.name); //hello } render () { return (); } }
2.在原生JS监听的事件中,如addEventListener, setState是同步的
import React, { Component } from 'react'; export default class Input extends Component { constructor(props) { super(props); this.state={ name: 'hello' } } _onChange(e) { // do something } componentDidMount() { let input = document.querySelector('.cp-input'); input.addEventListener('click', ()=>{ this.setState({ name:' world' }) console.log(this.state.name); //world }) } render () { return (); } }
3.在setTimeout中,setStatet是同步的
import React, { Component } from 'react'; export default class Input extends Component { constructor(props) { super(props); this.state={ name: 'hello' } } _onChange(e) { // do something } componentDidMount() { setTimeout(()=>{ this.setState({ name:' world' }) console.log(this.state.name); //world }, 1000) } render () { return (); } }
到此,关于“React中setState同步和异步怎么实现”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!
网站标题:React中setState同步和异步怎么实现
分享地址:http://pwwzsj.com/article/ipdoij.html