React严格模式和双重渲染

Question

拥有如此简单的CRAReactapp：

./index.tsx：

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')
);

./组件/主页。tsx：

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 <--

在控制台上。

为什么promise履行代码会被触发2次？我知道，对于React Strict模式，组件渲染了两次，但示例显示了一些不一致性---




Answer 1

根据医生的说法：-

从React 17开始，React自动修改控制台方法，如console。log（）以在对生命周期函数的第二次调用中使日志静音。但是，在可以使用变通方法的某些情况下，它可能会导致不期望的行为。

作为临时解决方法，您只需执行let log=console即可。在顶层记录，然后它将始终记录。

从https://github.com/facebook/react/issues/20090得到这个变通方法

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

promise的然后回调中的日志可以工作，因为它是React生命周期方法之外的异步行为。React不会在严格模式下关闭这些日志。但是console.log（Promise obj内）是在组件的函数体执行过程中发生的Promise执行器函数内的同步任务。