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

Question

我是一个新的react Js，我正在练习类组件，我注意到它是渲染两次，当我控制台日志的渲染方法，任何一个人可以解释我为什么会发生代码如下

import React, { Component } from 'react'

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

export default Counter

Answer 1

那么，这种情况发生的原因 React.StrictMode.

根据ReactJS的官方文档。

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

• 第一阶段 渲染阶段 确定需要对DOM等进行哪些更改。在这个阶段，React调用render，然后将结果与之前的render进行比较。

• 在这个阶段，React调用render，然后将结果与之前的渲染进行比较。承诺阶段 是React应用任何更改的时候。在React DOM的情况下，这是React插入、更新和删除DOM节点的时候）。React也会在这个阶段调用componentDidMount和componentDidUpdate等生命周期。

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

了解更多 此处 从官方文档中。

看看 这个 元器件生命周期图，以便清楚地了解。