setState的同步更新
react中的setState特点:
- 是异步操作函数;
- 组件在还没有渲染之前, this.setState 还没有被调用;
- 批量执行 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
}
- async 表示这是一个async函数,await只能用在这个函数里面。
- await 表示在这里等待promise返回结果了,再继续执行。
- 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的同步更新的更多相关文章
- React中setState同步更新策略
setState 同步更新 我们在上文中提及,为了提高性能React将setState设置为批次更新,即是异步操作函数,并不能以顺序控制流的方式设置某些事件,我们也不能依赖于this.state来计算 ...
- setState何时同步,何时异步,为什么?
setState何时同步,何时异步,为什么 答案:在React库控制时,异步:否则同步. 示例代码如下: constructor(props){ super(porps); this.state = ...
- React中this.setState是同步还是异步?为什么要设计成异步?
在使用react的时候,this.setState为什么是异步呢? 一直以来没有深思这个问题.昨天就此问题搜索了一下. react创始人之一 Dan Abramovgaearon在GitHub上回答了 ...
- svn-多个项目版本库和自动同步更新post-commit
由于项目测试需求,需要远程服务器上使用svn做版本控制. 需求: 1,项目test1,项目test2,各自独立版本库,各自独立用户权限,便于项目管理 2,同步提交,本地svn提交至版本库后,服务器上的 ...
- 141029 V7 异步通知测试,15分钟循环代码重构,同步更新payInfo测试,支付成功timer测试成功说明
支付成功之后的1分钟定时任务:测试成功. 2014-10-29 17:16:06,892 DEBUG [http-bio-8086-exec-1] org.springframework.web.se ...
- 【转载】DataGridView 使用集合作为数据源,并同步更新
原文地址:http://hi.baidu.com/netyro/item/7340640e36738a813c42e239 今天做项目时遇到一个挠头的问题,当DataGridView的数据源为泛型集合 ...
- SVN之文件同步更新
在SVN的实际使用上,我有这样的一个需求,同一份保存在SVN库的文件,要求取出在不同的地方,并且仍然要保持同步.根据这样的需求,可以具体分为以下两种情况,下面以库文件A,副本文件A1和副本文件A2,来 ...
- VC自动与Internet时间服务器同步更新
在VCKBASE.CSDN里挖了许久的坟,才找到一些有点用的资料,最后自己整理出这样的个函数,方面VC实现时间同步,多的不说,自己看源码,根据自己的需要可以适当修改源码: #include <W ...
- linux上配置subversion服务器端安装配置并使用svn,windows本地检出,设置同步更新服务器的钩子
参考http://my.oschina.net/junn/blog/164041 http://songxj.blog.51cto.com/620981/396113 http://5iwww.blo ...
随机推荐
- What's the use of @ before the path defination
When you define your path const : const string Child_Medical_Pdf = @"~/Media/ChildPdf"; Th ...
- 【POJ1195】【二维树状数组】Mobile phones
Description Suppose that the fourth generation mobile phone base stations in the Tampere area operat ...
- 我用Emacs,后来转向Vim——Vim学习之Vim键盘图(绝对值得珍藏)
Emacs本来就比较臃肿,麻烦.当我发现Vim键盘图时,我就渐渐转向Vim,追随Unix/Linux哲学去了.. 我用了Emacs三个月,因为它的学习曲线没Vim陡,这点吸引了,我使用Linux才7. ...
- php之图片处理类缩略图加水印
用到两个image系统函数 imagecopymerge — 拷贝并合并图像的一部分 imagecopyresampled — 重采样拷贝部分图像并调整大小 /* 如何知道图片的大小和类型 无法确认调 ...
- LI 导航
HTML: <div class="my_nav"> <ul> <li class="tiao cur" id="ord ...
- 那些年被我坑过的Python——山外有山(第四章)
装饰器: 定义: 本质是函数,(装饰其他函数)就是为其他函数添加附加功能原则: 1.不能修改被装饰的函数的源代码 2.不能修改被装饰的函数的调用方式 优点: 装饰器带来的最直观的好处:减少对函数的细化 ...
- 使用OpenSSL API进行安全编程
http://www.ibm.com/developerworks/cn/linux/l-openssl.html OpenSSL API 的文档有些含糊不清.因为还没有多少关于 OpenSSL 使用 ...
- vs2013update4 vs-mda-remote cordova真机测试ios 解决里面一个坑
sudo npm install -g vs-mda-remote --user=你的用户名 此步骤为安装vs-mda-remote,如果安装成功 执行vs-mda-remote –secure fa ...
- O-C浮点数转化整数
1.简单粗暴,直接转化 float f = 1.5; int a; a = (int)f; NSLog("a = %d",a); 输出结果是1.(int)是强制类型转化,丢弃浮点数 ...
- c++ 顺序容器学习 - 容器适配器
摘要: 对 容器适配器 的疑问. 刚开始接触 容器适配器 时,总感觉怪怪的,认为多此一举,顺手搜了搜,原来我在这一点is not alone: STL容器适配器的用途 其中有个老兄说的好,这里 引用一 ...