简述 React 的生命周期

devtools/2024/12/23 12:28:59/

发现宝藏

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。【宝藏入口】。


React 生命周期是指一个组件从创建到销毁的过程,React 提供了一些生命周期方法,让开发者在特定的时刻执行代码。生命周期主要可以分为 类组件生命周期函数组件生命周期 两类。这里主要讲解类组件的生命周期方法,函数组件的生命周期会通过 Hooks 实现。

类组件生命周期

React 类组件的生命周期分为三大阶段:挂载(Mounting)更新(Updating)卸载(Unmounting)。每个阶段都有对应的生命周期方法。

1. 挂载阶段 (Mounting)

组件被创建并插入到 DOM 中的过程。

  • constructor(props)
    组件实例化时调用,通常在这里初始化 state 和绑定事件处理函数。

    constructor(props) {super(props);this.state = { count: 0 };
    }
    
  • static getDerivedStateFromProps(nextProps, nextState)
    在每次渲染前调用,无论是组件的初始化渲染还是更新时都会调用。
    这个方法返回一个对象,React 会合并这个对象到当前组件的 state 中。
    该方法是静态的,不能访问组件实例(this)。

    static getDerivedStateFromProps(nextProps, nextState) {if (nextProps.value !== nextState.value) {return { value: nextProps.value };}return null;
    }
    
  • render()
    该方法是类组件必须实现的方法,负责渲染 UI。它不应该修改 state 或执行副作用操作。

    render() {return <div>{this.state.count}</div>;
    }
    
  • componentDidMount()
    组件挂载完成后调用,只会执行一次。通常用于发起异步请求或设置订阅等操作。

    componentDidMount() {console.log('Component mounted!');
    }
    
2. 更新阶段 (Updating)

组件在其 state 或 props 发生变化时,会重新渲染。

  • static getDerivedStateFromProps(nextProps, nextState)
    同挂载阶段,组件每次更新时都会调用这个方法。

  • shouldComponentUpdate(nextProps, nextState)
    在组件重新渲染之前调用,可以通过返回 truefalse 来控制是否更新组件的渲染。如果返回 false,React 会跳过更新过程。

    shouldComponentUpdate(nextProps, nextState) {return nextState.count !== this.state.count;
    }
    
  • render()
    与挂载阶段相同,组件每次更新时都会重新调用 render 方法。

  • getSnapshotBeforeUpdate(prevProps, prevState)
    在渲染输出 (DOM 更新) 之前调用,可以获取一些渲染前的信息(比如滚动位置)。
    返回的值会作为 componentDidUpdate 方法的第三个参数。

    getSnapshotBeforeUpdate(prevProps, prevState) {return document.getElementById('myDiv').scrollTop;
    }
    
  • componentDidUpdate(prevProps, prevState, snapshot)
    组件更新后被调用,常用于执行依赖于 DOM 更新的操作。snapshotgetSnapshotBeforeUpdate 返回的值。

    componentDidUpdate(prevProps, prevState, snapshot) {console.log('Component updated!');
    }
    
3. 卸载阶段 (Unmounting)

组件从 DOM 中移除的阶段。

  • componentWillUnmount()
    组件被卸载之前调用,通常在这里进行清理操作,如取消定时器、取消网络请求、移除事件监听等。
    componentWillUnmount() {console.log('Component will unmount');
    }
    

4. 错误处理 (Error Handling)

  • static getDerivedStateFromError(error)
    当组件抛出错误时,会调用该方法,可以用于更新 state 以呈现备用 UI。

    static getDerivedStateFromError(error) {return { hasError: true };
    }
    
  • componentDidCatch(error, info)
    该方法用来捕获错误信息,可以用于日志记录。

    componentDidCatch(error, info) {console.error('Error caught:', error);
    }
    

函数组件生命周期 (React Hooks)

在 React 16.8 以后,函数组件可以通过 Hooks 来模拟类组件的生命周期。

  1. useState — 管理组件的状态。
  2. useEffect — 用于执行副作用,相当于类组件中的 componentDidMountcomponentDidUpdatecomponentWillUnmount 的合并。
  3. useContext — 获取 context 数据。
  4. useRef — 创建引用并在组件重新渲染时保持不变。

示例:使用 useEffect 代替生命周期方法

import React, { useState, useEffect } from 'react';function MyComponent() {const [count, setCount] = useState(0);// 相当于 componentDidMount 和 componentDidUpdateuseEffect(() => {console.log('Component rendered or updated');return () => {// 相当于 componentWillUnmountconsole.log('Cleanup before unmount');};}, [count]); // 依赖 count,当 count 改变时重新执行return (<div><p>{count}</p><button onClick={() => setCount(count + 1)}>Increase</button></div>);
}

总结

  • 挂载阶段constructorgetDerivedStateFromPropsrendercomponentDidMount
  • 更新阶段getDerivedStateFromPropsshouldComponentUpdaterendergetSnapshotBeforeUpdatecomponentDidUpdate
  • 卸载阶段componentWillUnmount
  • 错误处理getDerivedStateFromErrorcomponentDidCatch

随着 React Hooks 的引入,函数组件可以通过 useEffectuseState 等 Hooks 管理生命周期,提供了更简洁和灵活的方式。


http://www.ppmy.cn/devtools/144686.html

相关文章

探索 AnythingLLM:借助开源 AI 打造私有化智能知识库

探索如何使用开源项目 AnythingLLM 构建私有化智能知识库。通过 RAG 技术&#xff0c;将文档转化为可检索向量&#xff0c;结合大语言模型实现高效问答&#xff0c;适用于企业与个人开发者。 阅读原文请转到&#xff1a;https://jimmysong.io/blog/building-private-ai-knowled…

千亿级市场新机遇,品牌如何紧跟“宠”爱趋势创新宠物营销?

“世界破破烂烂&#xff0c;小狗缝缝补补”。在这个快节奏、高压力的社会中&#xff0c;宠物因其可爱的属性已经成为不少年轻人的“精神布洛芬”。 随着宠物经济的蓬勃发展&#xff0c;宠物营销已成为品牌竞相探索的新蓝海。那么&#xff0c;面对这一充满机遇的市场&#xff0…

方正畅享全媒体采编系统reportCenter.do接口SQL注入漏洞复现 [附POC]

文章目录 方正畅享全媒体采编系统reportCenter.do接口SQL注入漏洞复现 [附POC]0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.构造POC3.复现方正畅享全媒体采编系统reportCenter.do接口SQL注入漏洞复现 [附POC] 0x01 前言 免责声明:请勿利…

目标检测文献阅读-Faster R-CNN:通过区域建议网络实现实时目标检测(12.16-12.22)

目录 摘要 Abstract 1 引言 2 Fast R-CNN 2.1 RoI池化层 2.2 多任务损失 3 RPN 3.1 Anchors 3.2 损失函数 3.3 训练RPN 4 RPN和Fast R-CNN共享特征 总结 摘要 本周阅读的论文题目是《Faster R-CNN: Towards Real-Time Object Detection with Region Proposal Netw…

华为、华三交换机纯Web下如何创关键VLANIF、操作STP参数

华为交换机WEB操作 使用的是真机S5735&#xff0c;目前主流的版本都适用&#xff08;V1R5~V2R1的就不在列了&#xff0c;版本太老了&#xff0c;界面完全不一样&#xff0c;这里调试线接的console口&#xff0c;电脑的网络接在ETH口&#xff09; 「模拟器、工具合集」复制整段内…

拷贝构造和赋值运算符重载

目录 一、拷贝构造 拷贝构造的特点&#xff1a; 下面来看一下传值返回的过程&#xff1a;(这里会形成无穷递归&#xff0c;所以会直接编译报错) 使用指针进行拷贝构造&#xff1a; 拷贝构造的写法&#xff1a; 二、赋值运算符重载 运算符重载的特点&#xff1a; 赋值运算…

【分享-POI工具,Excel字段取值容错小工具】

在使用POI导出Excel数据的时候这样 FileInputStream inputStream new FileInputStream(file);Workbook workbook WorkbookFactory.create(inputStream);Sheet sheet workbook.getSheetAt(0);for (Row row : sheet) {row.getCell(1).getStringCellValue();......}row.getCell…

Jenkins持续集成部署——jenkins安装

前言 Jenkins 是一个开源的自动化服务器&#xff0c;主要用于持续集成&#xff08;CI&#xff09;和持续交付&#xff08;CD&#xff09;。它为软件开发团队提供了一个易于使用的平台来自动化构建、测试和部署应用程序的过程。 Jenkins 主要功能 1. 持续集成 (CI) 自动构建…