前言

学习React,生命周期很重要,我们了解完生命周期的各个组件,对写高性能组件会有很大的帮助.

一、简介

React /riˈækt/ 组件的生命周期指的是组件创建销毁过程中所经历的一系列方法调用。这些方法可以让我们在不同的时刻执行特定的代码,以满足组件的需求。

React 的生命周期可以分为三个阶段:挂载阶段更新阶段卸载阶段。每个阶段都有对应的生命周期方法,如下所示:

二、生命周期三个阶段

挂载阶段

  • constructor() :/kənˈstrʌktə(r)/ 构造函数,最先被执行,我们通常在构造函数里初始化state对象或者给自定义方法绑定this
  • static getDerivedStateFromProps()static getDerivedStateFromProps(nextProps, prevState),这是个静态方法,当我们接收到新的属性想去修改state,可以使用getDerivedStateFromProps
  • render() : /ˈrendə(r)/ render函数是纯函数,只返回需要渲染的东西,不应该包含其它的业务逻辑,可以返回原生的DOM、React组件、Fragment、Portals、字符串和数字、Boolean和null等内容
  • componentDidMount():组件装载之后调用,此时可以获取到DOM节点并操作,比如对canvas,svg的操作,服务器请求,订阅都可以写在这个里面,但是记得在componentWillUnmount中取消订阅。
    componentWillUnmount中取消订阅。

1、在 componentWillUnmount 生命周期方法中,我们可以执行一些清理工作,比如取消订阅或者清除定时器等。

取消订阅是指在组件卸载之前,将之前添加的事件监听或者数据订阅取消掉,以避免内存泄漏和无效的数据处理。

具体实现方法取决于你所使用的订阅方式。如果你使用的是 React Context API 或者 Redux 等状态管理库,则可以在 componentWillUnmount 方法中取消订阅。例如,使用 React Context API 订阅状态更新的代码可能如下所示:

  1. class MyComponent extends React.Component {
  2. constructor(props) {
  3. super(props);
  4. this.state = {
  5. value: props.initialValue,
  6. };
  7. this.unsubscribe = props.subscribe(this.handleValueChange);
  8. }
  9.  
  10. componentWillUnmount() {
  11. this.unsubscribe();
  12. }
  13.  
  14. handleValueChange = (newValue) => {
  15. this.setState({ value: newValue });
  16. };
  17.  
  18. render() {
  19. return (
  20. <div>
  21. <span>Current value: {this.state.value}</span>
  22. </div>
  23. );
  24. }
  25. }

在上面的代码中,unsubscribe 方法是一个用于取消订阅的函数,它在组件创建时通过 props.subscribe 方法添加订阅,然后在组件卸载时通过 componentWillUnmount 方法进行取消订阅。

2、如果你使用的是普通的 DOM 事件监听器或者 WebSocket 等浏览器原生 API,那么你需要在组件卸载时手动移除事件监听或者关闭 WebSocket 连接等。

例如,使用 addEventListener 添加事件监听器的代码可能如下所示:

  1. class MyComponent extends React.Component {
  2. constructor(props) {
  3. super(props);
  4. this.handleClick = this.handleClick.bind(this);
  5. }
  6.  
  7. componentDidMount() {
  8. document.addEventListener('click', this.handleClick);
  9. }
  10.  
  11. componentWillUnmount() {
  12. document.removeEventListener('click', this.handleClick);
  13. }
  14.  
  15. handleClick(event) {
  16. console.log('Clicked!', event.target);
  17. }
  18.  
  19. render() {
  20. return <div>Click anywhere to log the target element.</div>;
  21. }
  22. }

在上面的代码中,我们在组件挂载时通过 addEventListener 方法添加了一个 click 事件监听器,然后在组件卸载时通过 removeEventListener 方法移除该监听器。这样可以确保在组件卸载时不会再接收到无效的事件通知。

更新阶段

  • static getDerivedStateFromProps() /ˈstætɪk/ /dɪˈraɪvd/ /steɪt/ /prɒps/ 此方法在更新个挂载阶段都可能会调用
  • shouldComponentUpdate() shouldComponentUpdate(nextProps, nextState),有两个参数nextPropsnextState,表示新的属性和变化之后的state,返回一个布尔值,true表示会触发重新渲染,false表示不会触发重新渲染,默认返回true,我们通常利用此生命周期来优化React程序性能
  • render()  更新阶段也会触发此生命周期
  • getSnapshotBeforeUpdate() getSnapshotBeforeUpdate(prevProps, prevState),这个方法在render之后,componentDidUpdate之前调用,有两个参数prevPropsprevState,表示之前的属性和之前的state,这个函数有一个返回值,会作为第三个参数传给componentDidUpdate,如果你不想要返回值,可以返回null,此生命周期必须与componentDidUpdate搭配使用
  • componentDidUpdate() componentDidUpdate(prevProps, prevState, snapshot),该方法在getSnapshotBeforeUpdate方法之后被调用,有三个参数prevPropsprevStatesnapshot,表示之前的props,之前的state,和snapshot。第三个参数是getSnapshotBeforeUpdate返回的,如果触发某些回调函数时需要用到 DOM 元素的状态,则将对比或计算的过程迁移至getSnapshotBeforeUpdate,然后在 componentDidUpdate中统一触发回调或更新状态。

卸载阶段

  • componentWillUnmount() 当组件被卸载或者销毁了就会调用,我们可以在这个函数里去清除一些定时器,取消网络请求,清理无效的DOM元素等垃圾清理工作

这些生命周期方法按照顺序依次被调用。在挂载阶段,组件被创建并插入到 DOM 树中。在更新阶段,组件的 props 或者 state 发生改变时会触发更新,从而重新渲染组件。最后,在卸载阶段,组件被从 DOM 树中移除并销毁。

每个生命周期方法都有不同的作用,可以用来实现各种需求,比如在组件挂载时进行初始化工作、在组件更新时进行数据处理或者在组件卸载时进行清理工作等。

 

 
 
 

10分钟理解React生命周期的更多相关文章

  1. 10秒钟理解react生命周期

    慎点!这是一篇很水很水的文章, 抄自react中文文档, 本文详细介绍了react生命周期函数执行顺序, 以及各生命周期函数的含义和具体作用. 不同阶段生命周期函数执行顺序 挂载(Mounting) ...

  2. 理解React生命周期的好例子

    class App extends React.Component { static propTypes = { }; static defaultProps = { }; constructor(p ...

  3. React生命周期简单详细理解

    前言 学习React,生命周期很重要,我们了解完生命周期的各个组件,对写高性能组件会有很大的帮助. Ract生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 初始化 1.g ...

  4. [转帖]SQL Server 10分钟理解游标

    SQL Server 10分钟理解游标 https://www.cnblogs.com/VicLiu/p/11671776.html 概述 游标是邪恶的! 在关系数据库中,我们对于查询的思考是面向集合 ...

  5. React 生命周期

    前言 学习React,生命周期很重要,我们了解完生命周期的各个组件,对写高性能组件会有很大的帮助. Ract生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 初始化 1.g ...

  6. 22.1 、react生命周期(一)

    在每个react组件中都有以下几个生命周期方法~我们需要在不同阶段进行讨论 组件生命周期概述 1.初始化 在组件初始化阶段会执行 constructor static getDerivedStateF ...

  7. vue生命周期和react生命周期对比

    一 vue的生命周期如下图所示(很清晰)初始化.编译.更新.销毁 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE ht ...

  8. 前端005/React生命周期

    ES6中React生命周期 一.React生命周期 React生命周期主要包括三个阶段:初始化阶段.运行中阶段和销毁阶段. 在React不同的生命周期里,会依次触发不同的钩子函数. 二.React的生 ...

  9. React生命周期

    在react生命周期中,分2段执行,一个挂载的生命周期,一个是组件发生了数据变动,或者事件触发而引发的更新生命周期. 注:react生命周期很重要,对于很多组件场景的应用发挥重要作用,而且不熟悉生命周 ...

  10. React生命周期详解

    React生命周期图解: 一.旧版图解: 二.新版图解: 从图中,我们可以清楚知道React的生命周期分为三个部分:  实例化.存在期和销毁时. 旧版生命周期如果要开启async rendering, ...

随机推荐

  1. 2003031126-石升福-python数据分析第三周作业

    项目 Numpy 博客名称 2003031126-石升福-python数据分析第三周作业 课程班级博客链接 https://edu.cnblogs.com/campus/pexy/20sj 作业链接 ...

  2. Java的由来

    Java 发展史 1.1.起源 20 世纪 90 年代,单片式计算机系统诞生,单片式计算机系统不仅廉价,而且功能强大,使用它 可以大幅度提升消费性电子产品的智能化程度. SUN 公司为了抢占市场先机, ...

  3. PHP中获取时间的下一周下个月的方法

    PHP中获取时间的下一周,下个月等通常用于定制服务的时候使用,比如包月会员,包年等等 //通常用于定制服务的时候使用,比如包月会员,包年等等 //获取当前时间过一个月的时间,以DATETIME格式显示 ...

  4. 树莓派 IIC功能安装及测试

    参考连接: https://blog.csdn.net/panwen1111/article/details/81044428 https://blog.csdn.net/xukai871105/ar ...

  5. 将成员服务器ms1加到AD域中

    1.对ms1的ipv4设置,dns对应地址dc1服务器地址 2.修改计算机名,并加入域 重启后 2.以域用户登录方式有两种 1.  2. 检查ms1有没有加入dc1的域中 在dc1

  6. Spring MVC 常见问题

    Spring MVC的主要组件有那些? spring mvc 在使用 DispatcherServlet 处理 web 请求的时候,会用到 spring 中的九大组件,以下是几个关键的组件: 1.Li ...

  7. redis的数据操作和python操作redis+关系非关系数据库差异

    关系型数据库(RMDBS) 数据库中表与表的数据之间存在某种关联的内在关系,因为这种关系,所以我们称这种数据库为关系型数据库. 典型:Mysql/MariaDB.postgreSQL.Oracle.S ...

  8. NDVI最大值合成

    这里有NDVI250m分辨率的数据,目标:合成年最大值数据 [Spatial Analyst工具]|[局部分析]|[像元统计数据]

  9. 基于Mindspore2.0的GPT2预训练模型迁移教程

    摘要: 这篇文章主要目的是为了让大家能够清楚如何用MindSpore2.0来进行模型的迁移. 本文分享自华为云社区<MindNLP-基于Mindspore2.0的GPT2预训练模型迁移教程> ...

  10. Bootstarp5笔记

    我这次来更新Bootstarp5的相关知识啦! 一.安装教程 1.在官网下载相应版本 官网地址:getbootstrap.com 我下载的是Bootstarp5版本 2.点击下载之后,会得到一个压缩文 ...