欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2024-01-01 12:00:40
react起源于facebook的内部项目。react的出现是革命性的创新,react的是一个颠覆式的前端框架。在react官方这样介绍的它:一个声明式、高效、灵活的、创建用户界面的javascrip...

 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同步和异步的资料请关注其它相关文章!

上一篇:

下一篇: