const task = [];
function output(i) {
return new Promise((resolve) => {
setTimeout(() => {
console.log(i, Math.random());
resolve();
}, i * 1000);
});
}
for (var i = 0; i < 5; i++) {
task.push(output(i));
}
Promise.all(task).then((res) => {
setTimeout(() => {
console.log(i, "i");
}, 1000);
});
console.log(11111);
在执行上面的代码时输出为:
可以看出,每个console 都执行了两次
这是因为用脚手架创建项目,默认会自动启用严格模式,所以你会发现双调用现象
StrictMode 表示开启严格模式
某些情况下,React会修改console.log()
等控制台方法以使日志静默。
从React 17开始,React会自动修改console.log()等控制台方法,在对生命周期函数的第二次调用中关闭日志。但是,在可以使用解决方案的某些情况下,它可能会导致不希望的行为。
显然,当从Promise回调调用console.log时,它不会这样做。但当从render调用时,它会这样做。
- Strict Mode 的作用:
- 识别不安全的生命周期
- 关于使用过时字符串 ref API 的警告
- 关于使用废弃的 findDOMNode 方法的警告
- 检测意外的副作用
- 检测过时(遗留)的 context API
因为严格模式不能自动检测到你的副作用, 但它可以帮助你发现它们, 使其更具确定性。这是通过有意地双调用以下方法来完成的,但是你可能不太习惯,那就关了它