在我们阅读文档的时候,大多都说react的setState是异步的,可是它真的是异步的吗?如果是,那我们还可以猜想:那可以不可以同步?那什么时候需要异步,什么时候需要同步呢?
我们先来看下react的官方对setSate的说明:
将setState()认为是一次请求而不是一次立即执行更新组件的命令。为了更为可观的性能,React可能会推迟它,稍后会一次性更新这些组件。React不会保证在setState之后,能够立刻拿到改变的结果。
一个很经典的例子:
// 初始state.count 当前为 0
componentDidMount(){
this.setState({count: state.count + 1});
console.log(this.state.count)
}
如果你熟悉react,你一定知道最后的输出结果是0,而不是1。
我们再来看一个例子
class Demo extends Component {
constructor(props) {
super(props);
this.state = { number: 0 };
}
render() {
return <button ref="button" onClick={this.onClick.bind(this)}>点我</button>;
}
componentDidMount() {
//手动绑定mousedown事件
this.refs.button.addEventListener(
"mousedown",
this.onClick.bind(this)
);
//setTimeOut
setTimeout(this.onClick.bind(this), 1000);
}
onClick(event) {
if (event) {
console.log(event.type);
} else {
console.log("timeout");
}
console.log("prev state:", this.state.number);
this.setState({
number: this.state.number + 1
});
console.log("next state:", this.state.number);
}
}
export {Demo};
在这个组件中采用3中方法更新state
1.在div节点中绑定onClick事件
2.在componentDidMount中手动绑定mousedown事件
3.在componentDidMount中使用setTimeout调用onClick
在点击组件后,你可以猜到结果吗?输出结果是:
timeout
prev state: 0
next state: 1
mousedown
prev state: 1
next state: 2
click
prev state: 2
next state: 2
结果似乎有点出人意料,三种方式只有在div上绑定的onClick事件输出了可以证明setState是异步的结果,另外两种方式显示setState似乎是同步的。
总结:
1.在组件生命周期中或者react事件绑定中,setState是通过异步更新的。
2.在延时的回调或者原生事件绑定的回调中调用setState不一定是异步的。
这个结果并不说明setState异步执行的说法是错误的,更加准确的说法应该是setState不能保证同步执行。
javascript中alert是Bom中的成员函数,alert对话框是模态的,具有阻塞性质的,不点击是不会执行后续代码的。js的阻塞是指在调用结果返回之前,当前线程会被挂起, 只有在得到结果之后才会继续执行。
如何优化async代码?更好的编写async函数:使用return Promise.reject()在async函数中抛出异常,让相互之间没有依赖关系的异步函数同时执行,不要在循环的回调中/for、while循环中使用await,用map来代替它
Javascript语言的执行环境是单线程,异步模式非常重要。在浏览器端,耗时很长的操作都应该异步执行,避免浏览器失去响应,最好的例子就是Ajax操作。
js异步加载又被称为非阻塞加载,浏览器在下载JS的同时,还会进行后续页面处理。那么如何实现js异步加载呢?下面整理了多种实现方案供大家参考。异步加载js方案:Script Dom Element、onload时的异步加载、$(document).ready()、async属性、defer属性、es6模块type=module属性
回调函数方式:将异步方法如readFile封装到一个自定义函数中,通过将异步方法得到的结果传给自定义方法的回调函数参数。事件驱动方式:使用node events模块,利用其EventEmitter对象
JavaScript引擎是基于单线程 (Single-threaded) 事件循环的概念构建的,同一时刻只允许一个代码块在执行,所以需要跟踪即将运行的代码,那些代码被放在一个任务队列 (job queue) 中
传统的异步解决方案采用回调函数和事件监听的方式,而这里主要记录两种异步编程的新方案:ES6的新语法Promise;ES2017引入的async函数;Generator函数(略)
JS本身是一门单线程的语言,所以在执行一些需要等待的任务(eg.等待服务器响应,等待用户输入等)时就会阻塞其他代码。如果在浏览器中JS线程阻塞了,浏览器可能会失去响应,从而造成不好的用户体验。
请实现如下的函数,可以批量请求数据,所有的URL地址在urls参数中,同时可以通过max参数 控制请求的并发度。当所有的请求结束后,需要执行callback回调。发请求的函数可以直接使用fetch。
上述,在Chrome 66和node v10中,正确输出是:执行async1函数,此函数中又调用了async2函数,输出async2 end。回到async1函数,遇到了await,让出线程。遇到setTimeout,扔到下一轮宏任务队列
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!