react中的setState特点

  1. 是异步操作函数;
  2. 组件在还没有渲染之前, this.setState 还没有被调用;
  3. 批量执行 State 转变时让 DOM 渲染更快(相对比一个一个的setState的来的快)。
例如:{count:}//初始化count
this.setState({count:});
console.log(this.state.count);

setState函数并不会阻塞等待状态更新完毕。所以,打印出来的并不是count=1,而还是count=0。

很多时候,我们需要想要的state状态更新完成后再进行某些操作。此时,我们可以选择在componentWillUpdate生命周期或者componentDidUpdate生命周期的回调函数去执行我们的操作。虽然也可以达到预期效果,但是这样做不是最佳方法,代码变得破碎,可读性也不好。

因此,此时我们就需要保证setState的同步更新。

  • setState支持回调函数

第一个参数是我们要设置的state,第二个参数是在状态更新完毕后的回调操作

this.setState({count:},()=>{
console.log(this.state.count)//输出count=1
});
  • ES7的Async/Await实现异步转同步
var delay = function (time) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve();
}, time);
})
}; var start = async function () {
console.log('a');
await delay();
console.log('b');
}; start();//先输出a,稍等2秒后,输出了b

同样在react中的应用:

Promise来封装setState:
setStateAsync(state) {
return new Promise((resolve) => {
this.setState(state, resolve)
});
}
async componentDidMount() {
await this.setStateAsync({count: });
console.log(this.state.count);//输出count=1
}
  1. async 表示这是一个async函数,await只能用在这个函数里面。
  2. await 表示在这里等待promise返回结果了,再继续执行。
  3. await 后面跟着的应该是一个promise对象

附录:

class Example extends React.Component {
constructor() {
super();
this.state = {
val:
};
} componentDidMount() {
this.setState({val: this.state.val + });
console.log(this.state.val); // 第 1 次 log->0 this.setState({val: this.state.val + });
console.log(this.state.val); // 第 2 次 log->0 setTimeout(() => {
this.setState({val: this.state.val + });
console.log(this.state.val); // 第 3 次 log->2 this.setState({val: this.state.val + });
console.log(this.state.val); // 第 4 次 log->3
}, );
} render() {
return null;
}
};

setState的同步更新的更多相关文章

  1. React中setState同步更新策略

    setState 同步更新 我们在上文中提及,为了提高性能React将setState设置为批次更新,即是异步操作函数,并不能以顺序控制流的方式设置某些事件,我们也不能依赖于this.state来计算 ...

  2. setState何时同步,何时异步,为什么?

    setState何时同步,何时异步,为什么 答案:在React库控制时,异步:否则同步. 示例代码如下: constructor(props){ super(porps); this.state = ...

  3. React中this.setState是同步还是异步?为什么要设计成异步?

    在使用react的时候,this.setState为什么是异步呢? 一直以来没有深思这个问题.昨天就此问题搜索了一下. react创始人之一 Dan Abramovgaearon在GitHub上回答了 ...

  4. svn-多个项目版本库和自动同步更新post-commit

    由于项目测试需求,需要远程服务器上使用svn做版本控制. 需求: 1,项目test1,项目test2,各自独立版本库,各自独立用户权限,便于项目管理 2,同步提交,本地svn提交至版本库后,服务器上的 ...

  5. 141029 V7 异步通知测试,15分钟循环代码重构,同步更新payInfo测试,支付成功timer测试成功说明

    支付成功之后的1分钟定时任务:测试成功. 2014-10-29 17:16:06,892 DEBUG [http-bio-8086-exec-1] org.springframework.web.se ...

  6. 【转载】DataGridView 使用集合作为数据源,并同步更新

    原文地址:http://hi.baidu.com/netyro/item/7340640e36738a813c42e239 今天做项目时遇到一个挠头的问题,当DataGridView的数据源为泛型集合 ...

  7. SVN之文件同步更新

    在SVN的实际使用上,我有这样的一个需求,同一份保存在SVN库的文件,要求取出在不同的地方,并且仍然要保持同步.根据这样的需求,可以具体分为以下两种情况,下面以库文件A,副本文件A1和副本文件A2,来 ...

  8. VC自动与Internet时间服务器同步更新

    在VCKBASE.CSDN里挖了许久的坟,才找到一些有点用的资料,最后自己整理出这样的个函数,方面VC实现时间同步,多的不说,自己看源码,根据自己的需要可以适当修改源码: #include <W ...

  9. linux上配置subversion服务器端安装配置并使用svn,windows本地检出,设置同步更新服务器的钩子

    参考http://my.oschina.net/junn/blog/164041 http://songxj.blog.51cto.com/620981/396113 http://5iwww.blo ...

随机推荐

  1. What's the use of @ before the path defination

    When you define your path const : const string Child_Medical_Pdf = @"~/Media/ChildPdf"; Th ...

  2. 【POJ1195】【二维树状数组】Mobile phones

    Description Suppose that the fourth generation mobile phone base stations in the Tampere area operat ...

  3. 我用Emacs,后来转向Vim——Vim学习之Vim键盘图(绝对值得珍藏)

    Emacs本来就比较臃肿,麻烦.当我发现Vim键盘图时,我就渐渐转向Vim,追随Unix/Linux哲学去了.. 我用了Emacs三个月,因为它的学习曲线没Vim陡,这点吸引了,我使用Linux才7. ...

  4. php之图片处理类缩略图加水印

    用到两个image系统函数 imagecopymerge — 拷贝并合并图像的一部分 imagecopyresampled — 重采样拷贝部分图像并调整大小 /* 如何知道图片的大小和类型 无法确认调 ...

  5. LI 导航

    HTML: <div class="my_nav"> <ul> <li class="tiao cur" id="ord ...

  6. 那些年被我坑过的Python——山外有山(第四章)

    装饰器: 定义: 本质是函数,(装饰其他函数)就是为其他函数添加附加功能原则: 1.不能修改被装饰的函数的源代码 2.不能修改被装饰的函数的调用方式 优点: 装饰器带来的最直观的好处:减少对函数的细化 ...

  7. 使用OpenSSL API进行安全编程

    http://www.ibm.com/developerworks/cn/linux/l-openssl.html OpenSSL API 的文档有些含糊不清.因为还没有多少关于 OpenSSL 使用 ...

  8. vs2013update4 vs-mda-remote cordova真机测试ios 解决里面一个坑

    sudo npm install -g vs-mda-remote --user=你的用户名 此步骤为安装vs-mda-remote,如果安装成功 执行vs-mda-remote –secure fa ...

  9. O-C浮点数转化整数

    1.简单粗暴,直接转化 float f = 1.5; int a; a = (int)f; NSLog("a = %d",a); 输出结果是1.(int)是强制类型转化,丢弃浮点数 ...

  10. c++ 顺序容器学习 - 容器适配器

    摘要: 对 容器适配器 的疑问. 刚开始接触 容器适配器 时,总感觉怪怪的,认为多此一举,顺手搜了搜,原来我在这一点is not alone: STL容器适配器的用途 其中有个老兄说的好,这里 引用一 ...