为什么在 class 组件中渲染方法 运行 两次而没有包含任何状态？

Why render method run twice in class component without any state been included?

我是 React Js 的新手 我正在练习 class 组件 我注意到当我控制台记录渲染方法时它渲染了两次 任何人都可以解释我为什么它发生代码如下

import React, { Component } from 'react'

class Counter extends Component {
render() {
    console.log('check');
    return (
      <div>
          Count
      </div>
    )
  }
}

export default Counter

发生这种情况是因为 React.StrictMode。

根据 ReactJS 官方文档，

从概念上讲，React 确实分两个阶段工作：

  • 渲染阶段确定需要进行哪些更改，例如DOM。在此阶段，React 调用渲染，然后将结果与之前的渲染进行比较。

  • 提交阶段 是 React 应用任何更改的时候。 （在 React DOM 的情况下，这是 React 插入、更新和删除 DOM 节点的时间。）在这个阶段，React 还会调用 componentDidMount 和 componentDidUpdate 等生命周期。

提交阶段通常很快，但渲染可能很慢。出于这个原因，即将到来的并发模式（默认情况下尚未启用）将渲染工作分成几部分，暂停和恢复工作以避免阻塞浏览器。这意味着 React 可以在提交之前多次调用渲染阶段生命周期，或者它可以在根本不提交的情况下调用它们（因为错误或更高优先级的中断）。

从官方文档中了解更多here。

查看 this 组件生命周期图以获得清晰的理解。