记录一次在React脚手架中使用setTimeout会导致输出两次console.log

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 的作用：

1. 识别不安全的生命周期
2. 关于使用过时字符串 ref API 的警告
3. 关于使用废弃的 findDOMNode 方法的警告
4. 检测意外的副作用
5. 检测过时(遗留)的 context API

因为严格模式不能自动检测到你的副作用, 但它可以帮助你发现它们, 使其更具确定性。这是通过有意地双调用以下方法来完成的，但是你可能不太习惯，那就关了它