代码解析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中字体浮动效果的简单实例演示
Nov 18 Javascript
jquery仿微信聊天界面
May 06 jQuery
Vue通过input筛选数据
Oct 26 Javascript
详解vee-validate的使用个人小结
Jun 07 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
Mar 06 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
Aug 10 Javascript
解决vue.js this.$router.push无效的问题
Sep 03 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
Apr 02 Javascript
vue实现多组关键词对应高亮显示功能
Jul 25 Javascript
vue实现页面滚动到底部刷新
Aug 16 Javascript
vue2.x数组劫持原理的实现
Apr 19 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
Nov 09 Javascript
React配置子路由的实现
手把手教你从零开始react+antd搭建项目
react antd实现动态增减表单
react 项目中引入图片的几种方式
Jun 02 #Javascript
小程序wx.getUserProfile接口的具体使用
js实现自动锁屏功能
Jun 02 #Javascript
如何将JavaScript将数组转为树形结构
Jun 02 #Javascript
You might like
zend Framework中的Layout(模块化得布局)详解
2013/06/28 PHP
php集成环境xampp中apache无法启动问题解决方案
2014/11/18 PHP
PHP使用逆波兰式计算工资的方法
2015/07/29 PHP
PHP使用PHPExcel实现批量上传到数据库的方法
2017/06/08 PHP
php workerman定时任务的实现代码
2018/12/23 PHP
Laravel 模型使用软删除-左连接查询-表起别名示例
2019/10/24 PHP
Javascript 日期对象Date扩展方法
2009/05/30 Javascript
Jquery 绑定时间实现代码
2011/05/03 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
2012/12/12 Javascript
js写一个字符串转成驼峰的实例
2013/06/21 Javascript
jquery ready函数、css函数及text()使用示例
2013/09/27 Javascript
图片动画横条广告带上下滚动的JS代码
2013/10/25 Javascript
JavaScript中的字符串操作详解
2013/11/12 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
2014/05/29 Javascript
javascript去掉代码里面的注释
2015/07/24 Javascript
javascript中的正则表达式使用详解
2015/08/30 Javascript
JavaScript操作select元素和option的实例代码
2016/01/29 Javascript
javascript如何实现360度全景照片问题汇总
2016/04/04 Javascript
Javascript中构造函数要注意的一些坑
2017/01/23 Javascript
vue中如何实现pdf文件预览的方法
2018/07/12 Javascript
微信小程序select下拉框实现源码
2019/11/08 Javascript
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
微信小程序间使用navigator跳转传值问题实例分析
2020/03/27 Javascript
vue3.0+vue-router+element-plus初实践
2020/12/02 Vue.js
Tensorflow的可视化工具Tensorboard的初步使用详解
2018/02/11 Python
Python合并多个Excel数据的方法
2018/07/16 Python
python学生信息管理系统实现代码
2019/12/17 Python
使用pycharm和pylint检查python代码规范操作
2020/06/09 Python
matplotlib.pyplot.matshow 矩阵可视化实例
2020/06/16 Python
python中format函数如何使用
2020/06/22 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
幼儿园中班新学期寄语
2014/01/18 职场文书
销售简历自我评价
2014/01/24 职场文书
表彰大会主持词
2014/03/26 职场文书
交通事故委托书范本(2篇)
2014/09/21 职场文书
幼儿园托班开学寄语(2016春季)
2015/12/03 职场文书