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


Posted in Javascript onJune 03, 2021

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

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

      React的官方网址:https://reactjs.org/GitHub

地址为:https://github.com/facebook/react

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

Javascript 相关文章推荐
JavaScript写的一个DIV 弹出网页对话框
Aug 14 Javascript
Javascript new关键字的玄机 以及其它
Aug 25 Javascript
弹出层之1:JQuery.Boxy (一) 使用介绍
Oct 06 Javascript
html中的input标签的checked属性jquery判断代码
Sep 19 Javascript
Javascript脚本实现静态网页加密实例代码
Nov 05 Javascript
javascript面向对象之访问对象属性的两种方式分析
Jan 13 Javascript
jQuery创建DOM元素实例解析
Jan 19 Javascript
javascript获得当前的信息的一些常用命令
Feb 25 Javascript
javascript实现标签切换代码示例
May 22 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
Sep 15 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
详解如何在Canvas中添加事件的方法
Apr 17 Javascript
React配置子路由的实现
手把手教你从零开始react+antd搭建项目
react antd实现动态增减表单
react 项目中引入图片的几种方式
Jun 02 #Javascript
小程序wx.getUserProfile接口的具体使用
js实现自动锁屏功能
Jun 02 #Javascript
如何将JavaScript将数组转为树形结构
Jun 02 #Javascript
You might like
php定义数组和使用示例(php数组的定义方法)
2014/03/29 PHP
php中$_POST与php://input的区别实例分析
2015/01/07 PHP
PHP基于openssl实现的非对称加密操作示例
2019/01/11 PHP
Thinkphp 框架扩展之类库扩展操作详解
2020/04/23 PHP
用js实现多域名不同文件的调用方法
2007/01/12 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
转换字符串为json对象的方法详解
2013/11/29 Javascript
jQuery中ajax的使用与缓存问题的解决方法
2013/12/19 Javascript
javascript检查浏览器是否已经启用XX功能
2015/07/10 Javascript
javascript html实现网页版日历代码
2016/03/08 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
2016/10/30 Javascript
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
angularJs中$http获取后台数据的实例讲解
2018/08/08 Javascript
微信小程序利用for循环解决内容变更问题
2020/03/05 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
2020/07/13 Javascript
[10:14]2018DOTA2国际邀请赛寻真——paiN Gaming不仅为自己而战
2018/08/14 DOTA
[59:15]EG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/29 DOTA
SublimeText 2编译python出错的解决方法(The system cannot find the file specified)
2013/11/27 Python
python使用xlrd与xlwt对excel的读写和格式设定
2017/01/21 Python
Django中间件实现拦截器的方法
2018/06/01 Python
Pyinstaller打包.py生成.exe的方法和报错总结
2019/04/02 Python
Python 的字典(Dict)是如何存储的
2019/07/05 Python
Django中的用户身份验证示例详解
2019/08/07 Python
python智联招聘爬虫并导入到excel代码实例
2019/09/09 Python
matplotlib绘制多个子图(subplot)的方法
2019/12/03 Python
Python爬虫爬取百度搜索内容代码实例
2020/06/05 Python
利用Python如何制作贪吃蛇及AI版贪吃蛇详解
2020/08/24 Python
一款纯css3实现的动画加载导航
2014/10/08 HTML / CSS
Html5之svg可缩放矢量图形_动力节点Java学院整理
2017/07/17 HTML / CSS
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
公司接待方案
2014/03/08 职场文书
会计岗位说明书
2014/07/29 职场文书
2019个人年度目标制定攻略!
2019/07/12 职场文书
如何撰写出一份完美的商业计划书?
2019/07/12 职场文书
Spring事务管理下synchronized锁失效问题的解决方法
2022/03/31 Java/Android
vue elementUI批量上传文件
2022/04/26 Vue.js