React中的setState

setState为什么需要异步?

  • 无法限制何时使用异步,多次连续使用setState
  • 防止多次渲染,异步rendering不仅仅是性能上的优化,而且这可能是react组件模型在发生的根本性的改变
this.setState({
inputTxt:''
})
console.log(this.state.inputTxt); //立即打印不出inputTxt:''

  

如果我们要立即打印出inputTxt的变化需要通过setTimeout打印出来

  this.setState({
inputTxt:''
})
setTimeout(function(){
console.log(this.state.inputTxt);
},0)

或者:

 this.setState({
inputTxt:''
},()=>{
console.log(this.state.inputTxt);
})

setState最终会通过this.render 返回newVnode,然后通过patch函数和preVnode进行对比,从而重新渲染html

Vue中的属性变化

vue中属性变化,首先触发Object.defineProperty中属性的set监听,执行updateComponent方法(异步),通过vm._render()更新vNode(新旧node对比),最后渲染到html中

浅谈React、Vue 部分异步的更多相关文章

  1. 浅谈React工作原理

    浅谈React工作原理:https://www.cnblogs.com/yikuu/p/9660932.html 转自:https://cloud.tencent.com/info/63f656e0b ...

  2. 浅谈React

    浅谈react react是什么?其官网给出了明确定义:A JavaScript library for building user interfaces,一个用于构建用户界面的JavaScript库 ...

  3. 【转】浅谈React、Flux 与 Redux

    本文转自<浅谈React.Flux 与 Redux>,转载请注明出处. React React 是一个 View 层的框架,用来渲染视图,它主要做几件事情: 组件化 利用 props 形成 ...

  4. 浅谈React数据流管理

    引言:为什么数据流管理如此重要?react的核心思想就是:UI=render(data),data就是我们说的数据流,render是react提供的纯函数,所以用户界面的展示完全取决于数据层.这篇文章 ...

  5. 浅谈react受控组件与非受控组件

    引言 最近在使用蚂蚁金服出品的一条基于react的ant-design UI组件时遇到一个问题,编辑页面时input输入框会展示保存前的数据,但是是用defaultValue就是不起作用,输入框始终为 ...

  6. 浅谈 React

    机缘巧合认识React,翻了2天的资料,又整理了1天,也算是简单入门了;之前也学过angular,相比来说,的确React代码逻辑更加简单明了,理解起来也相对容易. React 具备以下特性:1.声明 ...

  7. 浅谈React受控与非受控组件

    背景 React内部分别使用了props, state来区分组件的属性和状态.props用来定义组件外部传进来的属性, 属于那种经过外部定义之后, 组件内部就无法改变.而state维持组件内部的状态更 ...

  8. 浅谈react的初步试用

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

  9. 浅谈React和VDom关系

    组件化 组件的封装 组件的复用 组件的封装 视图 数据 视图和数据之间的变化逻辑 import React, {Component} from 'react'; export default clas ...

随机推荐

  1. endwith与startwith字符串方法匹配重写

    endwith与startwith字符串方法匹配重写 在js读取文件信息并判断文件的格式类型时出现问题,并找到解决方案,写下来与大家分享,共勉. ---DanlV 描述 本人在上传MP3格式文件时,需 ...

  2. svg拖拽和缩放

    需求:做机房平面图,用svg实现拖拽和缩放,刚开始一头雾水,不知所措,好在皇天不负有心人........ 本文重点介绍拖拽,单纯实现很简单,但是由于vue项目,机房图有很多事件,拖拽就成了难点 简单介 ...

  3. vs生成的exe程序和相关dll打包

    原文:http://blog.csdn.net/yhhyhhyhhyhh/article/details/50782897   打包工具:Inno Setup 编译器  源文件 :vs生成的.exe和 ...

  4. Anaconda 执行命令报ssl错误

  5. 关于pom版本提交不成功的问题

    今天碰到个问题:我在原来的一个pom项目的client服务里面修改了一个java类,但是没有升级版本.然后再预发环境更新后,从显示的日志来看,仍然是我修改前的版本. 这就奇怪了,看了svn确实已经提交 ...

  6. devexpress 中 XtraTabcontrol 改变BackColor 的方法

    装载自CSDN,原文地址  https://blog.csdn.net/zjzytnn/article/details/53699340 今天在实现CAD文件的读和显示操作的时候,需要将CAD文件显示 ...

  7. 24点-code1

    #include <iostream> #include <string> #include <cstdlib> #include <cmath> us ...

  8. good pics

  9. 贝叶斯网络(Bayesian network))简介(PRML第8.1节总结)概率图模型(Graphical models)

    转:http://www.cnblogs.com/Dzhouqi/p/3204353.html 部分图为手写,由于本人字很丑,望见谅,只是想把PRML书的一些部分总结出来,给有需要的人看,希望能帮到一 ...

  10. mongodb在windows平台安装和启动

    mongodb 官网:https://www.mongodb.com mongodb 官网下载: mongodb-win32-x86_64-2008plus-ssl-3.4.2-signed.msi ...