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

Posted 2023-02-23

【中文标题】为啥渲染方法在类组件中运行两次而没有包含任何状态？

【英文标题】：Why render method run twice in class component without any state been included?为什么渲染方法在类组件中运行两次而没有包含任何状态？

【发布时间】：2020-09-02 02:00:40

【问题描述】：

我是反应 Js 的新手我正在练习类组件我注意到当我控制台记录渲染方法时它会渲染两次

import React,  Component  from 'react'

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


export default Counter

【问题讨论】：

子组件与父组件一起重新渲染。检查其父级是否正在渲染

@Vaibhav 您的意思是说第一个 chlid 呈现自己而不是使用其父组件重新呈现？

【参考方案1】：

这是因为React.StrictMode。

根据 ReactJS 官方文档，

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

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

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

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

从官方文档了解更多here。

查看this 组件生命周期图，了解清楚。

【讨论】：

@Bilal 如果您认为您已经得到答案，您能否将答案标记为正确并关闭问题。谢谢。支持将不胜感激。