【React】- 组件生命周期连续渲染两次问题

文章介绍了在React中组件的生命周期方法为何会被执行两次,这主要是由于React的严格模式(StrictMode)导致的。StrictMode用于在开发模式下检查潜在问题,如不安全的生命周期、过时API等。通过注释掉StrictMode,可以解决生命周期方法被重复调用的问题。
摘要由CSDN通过智能技术生成

最近在整理生命周期相关的知识内容,然后发现一个奇怪的现象,即组件的生命周期会运行2次!经过确认不是代码问题,于是开始找度娘,终于找到其原因-React中的严格模式,在这里记录一下

一、问题重现

如图所示,当组件初始化渲染时,每个周期都走了2次,按理说初始化时所有运行的生命周期都仅执行一次。
代码

import {
    Component } from "react";
class Com extends Component {
   
  constructor(props) {
   
    super(props);
    this.state = {
   
      value: 0,
    
  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
引用\[1\]:当渲染过程,生命周期或子组件的构造函数中抛出错误时,会调用如下方法: static getDerivedStateFromProps()componentDidCatch() 常用生命周期 1.render() 。 引用\[2\]:当组件实例被创建并插入DOM时,其生命周期调用顺序如下: constructor()static getDerivedStateFromProps()render()componentDidMount() 组件更新时 。 引用\[3\]:组件渲染之后调用,只调用一次 2.4、生命周期函数代码示例 import React, { Component } from 'react' export default class OldReactComponent extends Component { constructor(props) { super(props) // getDefaultProps:接收初始props // getInitialState:初始化state } state = { } componentWillMount() { // 组件挂载前触发 } render() { return ( <h2>Old React.Component</h2> ) } componentDidMount() { // 组件挂载后触发 } componentWillReceivePorps(nextProps) { // 接收到新的props时触发 } shouldComponentUpdate(nextProps, nextState) { // 组件Props或者state改变时触发,true:更新,false:不更新 return true } componentWillUpdate(nextProps, nextState) { // 组件更新前触发 } componentDidUpdate() { // 组件更新后触发 } componentWillUnmount() { // 组件卸载时触发 } } 3、新的生命周期 3.1、Mounting(加载阶段:涉及4个钩子函数) 。 问题:react函数组件 生命周期 回答: React函数组件生命周期相对简单,只有两个阶段:Mounting(加载阶段)和Unmounting(卸载阶段)。在Mounting阶段,函数组件会依次执行以下生命周期函数:constructor()、render()和componentDidMount()。constructor()函数用于初始化组件的状态和绑定事件处理函数。render()函数用于渲染组件的UI。componentDidMount()函数在组件被插入DOM后调用,可以进行一些异步操作或订阅事件。在Unmounting阶段,函数组件会执行componentWillUnmount()函数,在组件被卸载前进行一些清理工作,比如取消订阅事件或清除定时器。除了这些生命周期函数,函数组件没有其他生命周期函数可用。 #### 引用[.reference_title] - *1* *2* [React生命周期详解](https://blog.csdn.net/weixin_46872121/article/details/126623679)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [关于React组件生命周期函数的详解](https://blog.csdn.net/p445098355/article/details/104667187)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值