Javascript React严格模式和双重渲染

拥有如此简单的CRA

React

app：

/index.tsx：

从“React”导入React；
从“react dom”导入react dom；
从“./components/Home”导入Home；
ReactDOM.render(
,
document.getElementById（'root'））
);

./components/Home.tsx：

函数Home（）{
让我承诺=新承诺（函数（myResolve，myReject）{
设x=0；
console.log（“-->”在Promise obj Promise Completed中，根据以下内容：-

从React 17开始，React自动修改控制台
方法（如console.log（））在第二次调用
生命周期功能。但是，它可能会在
在某些情况下，可以使用变通方法

作为一种临时解决方法，您只需在顶层执行
let log=console.log
，然后它就会一直记录

从以下方面获得了解决方案-

下面是一个代码沙盒，您可以在其中看到预期的输出：-


promise的
然后
回调中的日志记录有效，因为它是React方法的生命周期之外的异步行为。React不会在严格模式下使那些日志静音。
但是
console.log（“在Promise obj中”）
是发生在
Promise
executor函数内的同步任务，该任务在执行组件的函数体期间发生
好的，我知道这是一条关于静音日志消息的docs语句。但是如果它使Promise obj内的
-->静音
import React from 'react';
import ReactDOM from 'react-dom';
import Home from './components/Home';

ReactDOM.render(
  <React.StrictMode>
     <Home></Home>
  </React.StrictMode>,
  document.getElementById('root')
);

function Home() {
    let myPromise = new Promise(function(myResolve, myReject) {
        
        let x = 0;
        console.log("--> inside a Promise obj <--");
        
        if (x === 0) {
            myResolve("OK");
        } else {
            myReject("Error");
        }
    }); 

    myPromise.then(
        function(value) {console.log("--> Promise fulfilled <--")},
    );

    return (
        <div>
            <b>Home Page</b>
        </div>
    )
}

export default Home

--> inside a Promise obj <--
--> Promise fulfilled <--
--> Promise fulfilled <--