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. JavaScript 事件委托

    JavaScript事件委托,或者叫事件代理,是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 借花献佛的例子(取快递): 有三个同事预计会在周一收到快递.为签收快递,有两种办法 ...

  2. 属性只有一个值的这类 html 属性是怎么回事,该如何设置值;比如:checked = “checked” vs checked = true

    参考链接:https://stackoverflow.com/questions/10650233/checked-checked-vs-checked-true 问: What is the dif ...

  3. 三、安装远程工具xshell,使用SFTP传输文件——Linux学习笔记

    A)远程工具 学Linux没有远程工具怎么行,百度了下,发现了xshell这个东西,重点是可以免费. 链接是多简单啊 输入地址,账号就搞定了. 打命令什么的都搞定了,真的感谢这个时代,求学有路啊! 到 ...

  4. QT的定时器使用

    http://blog.csdn.net/steven6977/article/details/9310997

  5. Python学习---同步条件event/队列queue1223

    写在前面: 在使用这些共享API的时候,我们要注意以下几点: 在UNIX平台上,当某个进程终结之后,该进程需要被其父进程调用wait,否则进程成为僵尸进程(Zombie).所以,有必要对每个Proce ...

  6. 浅析tnsping

    首先,先弄清楚tnsping是什么: Oracle Net 工具(命令)tnsping,是一个OSI会话层的工具,测试数据库服务的命令,用来决定是否一个Oracle Net 网络服务(service) ...

  7. 设计模式:装饰器(Decorator)模式

    设计模式:装饰器(Decorator)模式 一.前言    装饰器模式也是一种非常重要的模式,在Java以及程序设计中占据着重要的地位.比如Java的数据流处理,我们可能看到数据流经过不同的类的包装和 ...

  8. June 20th 2017 Week 25th Tuesday

    Care and diligence bring luck. 谨慎和勤奋,带来好运气. In my opinion, care and diligence may just gurantee us a ...

  9. c++新标准的一个问题

    显示转换运算符存在多个兼容版本的时候,explicit 关键字无效,编译器默认会选择那个兼容版本进行转换,而不是报错. 测试环境:gcc4.8.1 示例代码: class plebe { privat ...

  10. 用CI框架向数据库中实现简单的增删改查

    以下代码基于CodeIgniter_2.1.3版 用PHP向数据库中实现简单的增删改查(纯代码)请戳 http://www.cnblogs.com/corvoh/p/4641476.html Code ...