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

Question

我是新手反应 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 调用渲染，然后将结果与之前的渲染进行比较。

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

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

从官方文档中了解更多信息。

查看此组件生命周期图以清晰理解。