javascript - react 中各个声明周期中异步的执行顺序

问题描述

componentWillMount(){ setTimeout(()=>{ alert(1); },100) } componentDidMount(){ setTimeout(()=>{ alert(2); },100) }

组件中的2个生命周期函数都有异步操作，执行顺序是严格按照声明周期的顺序，也就是先1后2，还是不确定执行顺序是根据插入到消息队列里面的先后顺序执行的？问题可以理解为假设componentWillMount这个异步结果返回时间很长很长，而componentDidMount这个异步结果返回时间很短，有没有可能先执行componentDidMount里面的回调结果，然后在执行componentWillMount里面的回调结果

问题解答

简化问题为：假设两个异步动作 A 和 B 触发顺序已知，那么 A 和 B 中同样延时的 setTimeout 是否能保证顺序？

答案显然是不能的。例如当 A 和 B 之间只有微秒级延时时，两个设定了巨大延时的 setTimeout 就不能保证按照调用 setTimeout 时的先后顺序触发。

不能够依赖这种脆弱的时序关系来保证代码的执行顺序。在 Code Review 中如果遇到利用这种关系来实现数据初始化、异步请求等功能的代码，答主肯定是会提出意见的。对于异步的控制流，可以采用 Promise / yield 等方式来保证执行顺序，在这里就不赘述了。