React中setState同步和异步怎么实现

这篇文章主要介绍"React中setState同步和异步怎么实现"，在日常操作中，相信很多人在React中setState同步和异步怎么实现问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"React中setState同步和异步怎么实现"的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

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同步和异步怎么实现"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章！