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 ...
随机推荐
- vs里 .sln和.suo 文件
Net解决方案下 .sln文件和.suo文件的解释:When a Web site is created, a solution file (.sln) and a hidden solution u ...
- 微信小程序开发之 下拉刷新,上拉加载更多
本文记载了如何在微信小程序里面实现下拉刷新,上拉加载更多 先开看一下界面 大致如此的界面吧. 这个Demo使用了微信的几个Api和事件,我先列出来. 1.wx.request (获取远程服务器的数据, ...
- gulp-htmlmin可以压缩html的gulp插件
通过一条命令用Npm安装gulp-htmlmin: npm install gulp-htmlmin --save-dev 安装完毕后,打开gulpfile.js文件,我们里面编写一个task用来专门 ...
- 【POJ1442】【Treap】Black Box
Description Our Black Box represents a primitive database. It can save an integer array and has a sp ...
- C++最后课程项目总结
第一次独立完成的C++小项目,40小时 + 5小时Update + 8小时Linux移植. 过程: 过程非常认真,一个星期主要就是忙这个,为了完成某个部分,有时饭都推迟吃,连续对着电脑10几个小时很累 ...
- Hdu 2874 Connections between cities
题意: 城市 道路 没有环 不一定连通的树 求两城市的最短距离 设想一下就是很多小树 那好办 思路: lca离线算法 然后有个技巧就是 每次我们tarjan一棵树不是最后树的节点都访问过并且孩子全 ...
- 【C#枚举】根据EnumName获取Value
public static int GetEnumValue(Type enumType, string enumName) { try { if (!enumType.IsEnum) throw n ...
- .NET Framework(一)
.NET Framework:即Microsoft .NET Framework,它是用于Windows的新托管代码编程模型.它强大功能与新技术结合起来,用于构建具有视觉上引人注目的用户体验的应用程序 ...
- 在Thinkphp3.2 中使用PHPMailer 发送邮件
phpmailer发送邮件是php开发者首选的一个邮件发送插件了,下面我来介绍怎么集成phpmailer到thinkphp框架了,有需要了解的朋友可参考. phpmailer发送邮件功能很强大,今天真 ...
- MBR
Mbr位于磁盘的0柱面,0磁头,1扇区. MBR 有三部分构成,主引导程序,硬盘分区表DPT和,硬盘的有效标志55AA.在512个字节的主引导扇区里. 主引导程序占446个字节,dpt占6 ...