代码解析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 相关文章推荐
浅谈tudou土豆网首页图片延迟加载的效果
Jun 23 Javascript
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
Feb 23 Javascript
JqGrid web打印实现代码
May 31 Javascript
原生js实现查找/添加/删除/指定元素的class
Apr 12 Javascript
js调试系列 源码定位与调试[基础篇]
Jun 18 Javascript
Javascript数据结构与算法之列表详解
Mar 12 Javascript
js同源策略详解
May 21 Javascript
jQuery旋转木马式幻灯片轮播特效
Dec 04 Javascript
详解vue-router 命名路由和命名视图
Jun 01 Javascript
微信小程序Getuserinfo解决方案图解
Aug 24 Javascript
基于js实现抽红包并分配代码实例
Sep 19 Javascript
JS Canvas接口和动画效果大全
Apr 29 Javascript
React配置子路由的实现
手把手教你从零开始react+antd搭建项目
react antd实现动态增减表单
react 项目中引入图片的几种方式
Jun 02 #Javascript
小程序wx.getUserProfile接口的具体使用
js实现自动锁屏功能
Jun 02 #Javascript
如何将JavaScript将数组转为树形结构
Jun 02 #Javascript
You might like
索尼ICF-SW100收音机评测
2021/03/02 无线电
30个php操作redis常用方法代码例子
2014/07/05 PHP
PHP实现微信支付(jsapi支付)流程步骤详解
2018/03/15 PHP
PHP实现简易计算器功能
2020/08/28 PHP
javascript setTimeout()传递函数参数(包括传递对象参数)
2010/04/07 Javascript
基于jquery的无限级联下拉框js插件
2011/10/29 Javascript
js禁止页面使用右键(简单示例代码)
2013/11/13 Javascript
js淡入淡出的图片轮播效果代码分享
2015/08/24 Javascript
纯javascript响应式树形菜单效果
2015/11/10 Javascript
javaScript中的原型解析【推荐】
2016/05/05 Javascript
BootStrap selectpicker
2016/06/20 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
JS对大量数据进行多重过滤的方法
2016/11/04 Javascript
基于vue实现swipe分页组件实例
2017/05/25 Javascript
简单实现js放大镜效果
2017/07/24 Javascript
详细介绍RxJS在Angular中的应用
2017/09/23 Javascript
Vue中的异步组件函数实现代码
2018/07/20 Javascript
JS实现简单随机3D骰子
2019/10/24 Javascript
JavaScrip如果基于url实现图片下载
2020/07/03 Javascript
在实例中重学JavaScript事件循环
2020/12/03 Javascript
Python实现带参数的用户验证功能装饰器示例
2018/12/14 Python
Python利用lxml模块爬取豆瓣读书排行榜的方法与分析
2019/04/15 Python
python如何解析复杂sql,实现数据库和表的提取的实例剖析
2020/05/15 Python
python如何写个俄罗斯方块
2020/11/06 Python
德国足球商店:OUTFITTER
2019/05/06 全球购物
青年创业培训欢迎词
2014/01/08 职场文书
小学运动会广播稿200字(十二篇)
2014/01/14 职场文书
2014年幼儿园元旦活动方案
2014/02/13 职场文书
语文高效课堂实施方案
2014/05/03 职场文书
新法人代表任命书
2014/06/06 职场文书
2014年初一班主任工作总结
2014/11/08 职场文书
新手开公司创业注意事项有哪些?
2019/07/29 职场文书
人生哲理妙语30条:淡写流年,笑过人生
2019/09/04 职场文书
微信小程序基础教程之echart的使用
2021/06/01 Javascript
MySQL中EXPLAIN语句及用法
2022/05/20 MySQL
vue css 相对路径导入问题级踩坑记录
2022/06/05 Vue.js