【React】React 生命周期完全指南

news2024/11/13 12:04:07

鑫宝Code

🌈个人主页: 鑫宝Code
🔥热门专栏: 闲话杂谈| 炫酷HTML | JavaScript基础
💫个人格言: "如无必要,勿增实体"


文章目录

  • React 生命周期完全指南
    • 一、生命周期概述
    • 二、生命周期的三个阶段
      • 2.1 挂载阶段(Mounting)
      • 2.2 更新阶段(Updating)
      • 2.3 卸载阶段(Unmounting)
    • 三、常用生命周期方法详解
      • 3.1 constructor(构造函数)
      • 3.2 componentDidMount
      • 3.3 componentDidUpdate
      • 3.4 componentWillUnmount
    • 四、生命周期的最佳实践
      • 4.1 性能优化
      • 4.2 错误处理
    • 五、新旧生命周期的变化
      • 5.1 已废弃的生命周期方法
      • 5.2 新增的生命周期方法
    • 六、Hooks 时代的生命周期
    • 七、总结

React 生命周期完全指南

在这里插入图片描述

一、生命周期概述

React 组件的生命周期是指组件从创建、更新到销毁的整个过程。合理地使用生命周期方法可以让我们更好地控制组件的行为,优化性能,并处理副作用。

二、生命周期的三个阶段

2.1 挂载阶段(Mounting)

组件实例被创建并插入 DOM 的过程

class MyComponent extends React.Component {
  // 1. 构造函数
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    console.log('1. constructor');
  }

  // 2. 静态方法,很少使用
  static getDerivedStateFromProps(props, state) {
    console.log('2. getDerivedStateFromProps');
    return null;
  }

  // 3. 渲染方法
  render() {
    console.log('3. render');
    return <div>{this.state.count}</div>;
  }

  // 4. 挂载完成
  componentDidMount() {
    console.log('4. componentDidMount');
  }
}

2.2 更新阶段(Updating)

当组件的 props 或 state 发生变化时触发更新

class MyComponent extends React.Component {
  // 1. 静态方法
  static getDerivedStateFromProps(props, state) {
    return null;
  }

  // 2. 是否应该更新
  shouldComponentUpdate(nextProps, nextState) {
    return true;
  }

  // 3. 渲染
  render() {
    return <div>{this.state.count}</div>;
  }

  // 4. 获取更新前的快照
  getSnapshotBeforeUpdate(prevProps, prevState) {
    return null;
  }

  // 5. 更新完成
  componentDidUpdate(prevProps, prevState, snapshot) {
    // 处理更新后的操作
  }
}

2.3 卸载阶段(Unmounting)

组件从 DOM 中移除的过程

class MyComponent extends React.Component {
  componentWillUnmount() {
    // 清理工作,比如清除定时器、取消订阅等
    console.log('组件即将卸载');
  }
}

三、常用生命周期方法详解

在这里插入图片描述

3.1 constructor(构造函数)

constructor(props) {
  super(props);
  // 初始化状态
  this.state = {
    count: 0,
    data: []
  };
  // 绑定方法
  this.handleClick = this.handleClick.bind(this);
}

使用场景:

  • 初始化组件的 state
  • 绑定事件处理方法
  • 不要在这里调用 setState
  • 避免在这里执行副作用操作

3.2 componentDidMount

componentDidMount() {
  // 发起网络请求
  fetch('api/data')
    .then(res => res.json())
    .then(data => {
      this.setState({ data });
    });

  // 添加事件监听
  window.addEventListener('resize', this.handleResize);

  // 设置定时器
  this.timer = setInterval(() => {
    this.setState(state => ({
      count: state.count + 1
    }));
  }, 1000);
}

使用场景:

  • 发起网络请求
  • DOM 操作
  • 添加订阅
  • 设置定时器

3.3 componentDidUpdate

componentDidUpdate(prevProps, prevState, snapshot) {
  // 比较 props 变化
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }

  // 比较 state 变化
  if (this.state.count !== prevState.count) {
    document.title = `点击次数:${this.state.count}`;
  }
}

使用场景:

  • 对比更新前后的数据
  • 根据条件执行副作用
  • 注意避免无限循环

3.4 componentWillUnmount

componentWillUnmount() {
  // 清除定时器
  clearInterval(this.timer);
  
  // 移除事件监听
  window.removeEventListener('resize', this.handleResize);
  
  // 取消订阅
  this.subscription.unsubscribe();
}

使用场景:

  • 清理定时器
  • 取消网络请求
  • 清除事件监听
  • 取消订阅

四、生命周期的最佳实践

4.1 性能优化

class OptimizedComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // 只在必要时更新
    return (
      this.props.value !== nextProps.value ||
      this.state.count !== nextState.count
    );
  }

  render() {
    return (
      <div>
        <h1>{this.props.value}</h1>
        <p>{this.state.count}</p>
      </div>
    );
  }
}

4.2 错误处理

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 记录错误日志
    console.error('错误信息:', error);
    console.error('错误详情:', errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>出错了!</h1>;
    }
    return this.props.children;
  }
}

五、新旧生命周期的变化

5.1 已废弃的生命周期方法

  • componentWillMount
  • componentWillReceiveProps
  • componentWillUpdate

5.2 新增的生命周期方法

  • getDerivedStateFromProps
  • getSnapshotBeforeUpdate

六、Hooks 时代的生命周期

在这里插入图片描述

function HooksComponent() {
  // 相当于 constructor 和 componentDidMount
  const [count, setCount] = useState(0);

  // 相当于 componentDidMount 和 componentDidUpdate
  useEffect(() => {
    document.title = `点击次数:${count}`;
  }, [count]);

  // 相当于 componentDidMount 和 componentWillUnmount
  useEffect(() => {
    const handler = () => console.log('窗口大小改变');
    window.addEventListener('resize', handler);
    
    // 清理函数
    return () => {
      window.removeEventListener('resize', handler);
    };
  }, []);

  return <div>计数:{count}</div>;
}

七、总结

React 生命周期方法为我们提供了在组件不同阶段执行代码的机会。合理使用这些方法可以:

  1. 优化组件性能
  2. 正确处理副作用
  3. 管理组件状态
  4. 避免内存泄漏

在实际开发中,最常用的生命周期方法是:

  • constructor:初始化
  • componentDidMount:副作用处理
  • componentDidUpdate:更新后的操作
  • componentWillUnmount:清理工作

随着 React Hooks 的普及,函数组件正在逐渐取代类组件。但理解生命周期概念对于深入理解 React 的工作原理仍然至关重要。

End

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2237534.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

软件工程 软考

开发大型软件系统适用螺旋模型或者RUP模型 螺旋模型强调了风险分析&#xff0c;特别适用于庞大而复杂的、高风险的管理信息系统的开发。喷泉模型是一种以用户需求为动力&#xff0c;以对象为为驱动的模型&#xff0c;主要用于描述面向对象的软件开发过程。该模型的各个阶段没有…

C++20 概念与约束(2)—— 初识概念与约束

1、概念 C20 中引入新的编译期关键字 concept 用于创建概念。个人认为将其翻译为“构思”更为贴切。直接使用时&#xff0c;它更像一个只能用于模板的布尔类型关键字。 而如果用于模板中&#xff0c;他会将模板类型先带入自身&#xff0c;当自身条件为 true 才会实例化模板&…

Everything软件实现FTP功能

Windows的文件共享和ftp实在难用&#xff0c;这里介绍一种新的局域网内共享文件的方法 下载 Everything 选择想要共享的文件&#xff0c;选择包含到数据库&#xff0c;注意&#xff1a;要在对应的分卷设置&#xff0c;共享文件夹名称不要包含中文字符&#xff0c;因为Windows底…

系统管理与规划师

综合 工业化、信息化两化融合&#xff1a;战略、资源、经济、设备和技术的融合 诺兰6时期&#xff1a;&#xff08;初普控&#xff0c;整数成&#xff09;初始、普及、控制、整合、数据管理、成熟期&#xff1b;技术转型期介于控制和整合间 IT战略规划 IT战略制定&#xff1a;使…

初始MQ(安装使用RabbitMQ,了解交换机)

目录 初识MQ一&#xff1a;同步调用二&#xff1a;异步调用三&#xff1a;技术选型 RabbitMQ一&#xff1a;安装部署二&#xff1a;快速入门三&#xff1a;数据隔离 java客户端一&#xff1a;快速入门二&#xff1a;workqueues三&#xff1a;Fanout交换机四&#xff1a;Direct交…

[C++11] 类中新特性的添加

默认的移动构造和移动赋值 在 C11 之前&#xff0c;编译器会为每个类自动生成默认的构造函数、析构函数、拷贝构造函数、拷贝赋值运算符等函数&#xff0c;以实现对象的创建、销毁和拷贝操作。但拷贝操作会复制整个对象的数据&#xff0c;效率低&#xff0c;尤其是在处理大对象…

emr上使用sparkrunner运行beam数据流水线

参考资料 https://time.geekbang.org/column/intro/167?tabcatalog Apache Beam和其他开源项目不太一样&#xff0c;它并不是一个数据处理平台&#xff0c;本身也无法对数据进行处理。Beam所提供的是一个统一的编程模型思想&#xff0c;而我们可以通过这个统一出来的接口来编…

github高分项目 WGCLOUD - 运维实时管理工具

GitHub - tianshiyeben/wgcloud: Linux运维监控工具&#xff0c;支持系统硬件信息&#xff0c;内存&#xff0c;CPU&#xff0c;温度&#xff0c;磁盘空间及IO&#xff0c;硬盘smart&#xff0c;GPU&#xff0c;防火墙&#xff0c;网络流量速率等监控&#xff0c;服务接口监测&…

MyBatisPlus 用法详解

文章目录 一、快速入门1.1 引入依赖&#xff1a;1.2 定义 Mappper&#xff1a;1.3 使用演示&#xff1a;1.4 常见注解&#xff1a;1.4.1 TableName:1.4.2 TableId&#xff1a;1.4.3 TableField&#xff1a; 1.5 常见配置&#xff1a; 二、核心功能2.1 条件构造器&#xff1a;2.…

Python小游戏23——捕鱼达人

首先&#xff0c;你需要安装Pygame库。如果你还没有安装&#xff0c;可以使用以下命令进行安装&#xff1a; 【bash】 pip install pygame 运行效果展示 接下来是示例代码&#xff1a; 【python】 import pygame import random # 初始化Pygame pygame.init() # 屏幕尺寸 SCREEN…

库打包工具 rollup

库打包工具 rollup 摘要 **概念&#xff1a;**rollup是一个模块化的打包工具 注&#xff1a;实际应用中&#xff0c;rollup更多是一个库打包工具 与Webpack的区别&#xff1a; 文件处理&#xff1a; rollup 更多专注于 JS 代码&#xff0c;并针对 ES Module 进行打包webpa…

基于SSM+VUE小学生素质成长记录平台JAVA|VUE|Springboot计算机毕业设计源代码+数据库+LW文档+开题报告+答辩稿+部署教+代码讲解

源代码数据库LW文档&#xff08;1万字以上&#xff09;开题报告答辩稿 部署教程代码讲解代码时间修改教程 一、开发工具、运行环境、开发技术 开发工具 1、操作系统&#xff1a;Window操作系统 2、开发工具&#xff1a;IntelliJ IDEA或者Eclipse 3、数据库存储&#xff1a…

【架构设计常见技术】

EJB EJB是服务器端的组件模型&#xff0c;使开发者能够构建可扩展、分布式的业务逻辑组件。这些组件运行在EJB容器中&#xff0c;EJB将各功能模块封装成独立的组件&#xff0c;能够被不同的客户端应用程序调用&#xff0c;简化开发过程&#xff0c;支持分布式应用开发。 IOC …

优选算法 - 1 ( 双指针 移动窗口 8000 字详解 )

一&#xff1a;双指针 1.1 移动零 题目链接&#xff1a;283.移动零 class Solution {public void moveZeroes(int[] nums) {for(int cur 0, dest -1 ; cur < nums.length ; cur){if(nums[cur] 0){}else{dest; // dest 先向后移动⼀位int tmp nums[cur];nums[cur] num…

鸿蒙操作系统是什么?与安卓系统有什么区别?

鸿蒙操作系统 鸿蒙操作系统&#xff08;HarmonyOS&#xff09;是华为公司发布的一款基于微内核的面向全场景的分布式操作系统。 发展历程&#xff1a; 早期规划&#xff1a;华为从2012 年开始规划自有操作系统&#xff0c;并在芬兰赫尔辛基设立智能手机研发中心&#xff0c;招…

现场工程师日记-MSYS2迅速部署PostgreSQL主从备份数据库

文章目录 一、概要二、整体架构流程1. 安装 MSYS2 环境2. 安装postgresql 三、技术名词解释1.MSYS22.postgresql 四、技术细节1. 创建主数据库2.添加从数据库复制权限3. 按需修改参数&#xff08;1&#xff09;WAL保留空间&#xff08;2&#xff09;监听地址 4. 启动主服务器5.…

第二届计算机网络技术与电子信息工程国际学术会议(CNTEIE 2024,12月6-8日)

第二届计算机网络技术与电子信息工程国际学术会议&#xff08;CNTEIE 2024&#xff09; 2024 2nd International Conference on Computer Network Technology and Electronic and Information Engineering 重要信息 会议官网&#xff1a;www.cnteie.org 2024 2nd Internation…

Git 入门篇(一)

前言 操作系统&#xff1a;win11 64位 与gitee搭配使用 Git 入门篇&#xff08;一&#xff09; Git 入门篇&#xff08;二&#xff09; Git 入门篇&#xff08;三&#xff09; 目录 git下载、安装与配置 下载 安装 配置 git下载、安装与配置 下载 官网&#xff1a;git-…

WPS文档中的“等线”如何删除

如何删除“等线”占用的行如何删除表格之间的空行WPS文档中的“等线”是什么如果删除脚注文本占用的行 如下这种&#xff0c;在文档中添加了表格和脚注&#xff0c;发现上下表格之间有多行空行&#xff0c;鼠标选中&#xff0c;显示是“等线”&#xff0c;那么如何去除等线占用…

题目讲解15 合并两个排序的链表

原题链接&#xff1a; 合并两个排序的链表_牛客题霸_牛客网 思路分析&#xff1a; 第一步&#xff1a;写一个链表尾插数据的方法。 typedef struct ListNode ListNode;//申请结点 ListNode* BuyNode(int x) {ListNode* node (ListNode*)malloc(sizeof(ListNode));node->…