代码解析React中setState同步和异步问题

 react起源于facebook的内部项目。react的出现是革命性的创新，react的是一个颠覆式的前端框架。在react官方这样介绍的它：一个声明式、高效、灵活的、创建用户界面的javascript库，即使react的主要作用是构建ui，但是项目的逐渐成长已经使得react成为前后端通吃的webapp解决方案。

 angular中用的是watcher对象，vue是观察者模式，react就是state了，他们各有各的特点，没有好坏之分，只有需求不同而选择不同。

      react的官方网址：https://reactjs.org/github

地址为：

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 (
      <div classname='cp'>
        <input classname='cp-input'  value={this.state.name}  onchange={this._onchange.bind(this)} type="text"/>                
      </div>
    );
  }
}

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 (
      <div classname='cp'>
        <input classname='cp-input'  value={this.state.name}  onchange={this._onchange.bind(this)} type="text"/>                
      </div>
    );
  }
}

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 (
      <div classname='cp'>
        <input classname='cp-input'  value={this.state.name}  onchange={this._onchange.bind(this)} type="text"/>                
      </div>
    );
  }
}

以上就是解析react中setstate同步和异步代码详解的详细内容，更多关于react setstate同步和异步的资料请关注其它相关文章！