React 组件生命周期与 Hooks 简明指南

在这里插入图片描述

文章目录

      • 一、类组件的生命周期方法
        • 1. 挂载阶段
        • 2. 更新阶段
        • 3. 卸载阶段
      • 二、函数组件中的 Hooks
        • 1. useState
        • 2. useEffect
        • 3. useContext
        • 4. useReducer
      • 结论


好的,我们来详细讲解一下 React 类组件的生命周期方法和函数组件中的钩子(hooks)。

一、类组件的生命周期方法

React 类组件有几个重要的生命周期方法,这些方法可以让开发者在组件的不同阶段执行特定的代码。生命周期分为三个主要阶段:挂载、更新和卸载。

1. 挂载阶段

在组件创建并插入 DOM 中时,会依次调用以下方法:

  • constructor(props):

    • 构造函数,用于初始化状态和绑定事件处理方法。
    • 示例:
      class MyComponent extends React.Component {constructor(props) {super(props);this.state = { count: 0 };}
      }
      
  • static getDerivedStateFromProps(nextProps, prevState):

    • 在渲染之前调用,可以根据 props 更新 state。
    • 返回一个对象以更新 state,或者返回 null 表示不更新。
    • 示例:
      static getDerivedStateFromProps(nextProps, prevState) {if (nextProps.value !== prevState.value) {return { value: nextProps.value };}return null;
      }
      
  • render():

    • 必须实现的方法,返回要渲染的元素。
    • 示例:
      render() {return <h1>{this.state.count}</h1>;
      }
      
  • componentDidMount():

    • 组件挂载后立即调用,可以进行网络请求或添加订阅等操作。
    • 示例:
      componentDidMount() {fetchData().then(data => this.setState({ data }));
      }
      
2. 更新阶段

当组件的 state 或 props 发生变化时,会触发更新,调用以下方法:

  • static getDerivedStateFromProps(nextProps, prevState):

    • 同上,在组件更新前被调用。
  • shouldComponentUpdate(nextProps, nextState):

    • 返回一个布尔值,决定组件是否重新渲染。用于优化性能。
    • 示例:
      shouldComponentUpdate(nextProps, nextState) {return nextProps.value !== this.props.value;
      }
      
  • render():

    • 同上,返回要渲染的元素。
  • getSnapshotBeforeUpdate(prevProps, prevState):

    • 在最近一次渲染输出(提交)到 DOM 之前调用,可以捕获一些信息(如滚动位置),并将其返回给 componentDidUpdate
    • 示例:
      getSnapshotBeforeUpdate(prevProps, prevState) {return this.listRef.scrollTop;
      }
      
  • componentDidUpdate(prevProps, prevState, snapshot):

    • 组件更新后调用,可以用来处理副作用,例如根据更新后的 props 发送网络请求。
    • 示例:
      componentDidUpdate(prevProps, prevState, snapshot) {if (this.props.value !== prevProps.value) {// 处理更新}
      }
      
3. 卸载阶段

当组件从 DOM 中移除时,调用以下方法:

  • componentWillUnmount():
    • 用于清理,比如取消订阅、清除定时器等。
    • 示例:
      componentWillUnmount() {clearTimeout(this.timer);
      }
      

二、函数组件中的 Hooks

React 16.8 引入了 Hooks,使得函数组件也能拥有类组件的状态和生命周期功能。

1. useState
  • 用于在函数组件中添加状态。
  • 示例:
    const [count, setCount] = useState(0);
    
2. useEffect
  • 用于处理副作用,相当于类组件中的 componentDidMount, componentDidUpdatecomponentWillUnmount
  • 示例:
    useEffect(() => {// 组件挂载或更新时执行return () => {// 组件卸载时执行};
    }, [dependencies]); // 依赖数组,变化时重新执行 effect
    
3. useContext
  • 用于在函数组件中访问 React 上下文。
  • 示例:
    const value = useContext(MyContext);
    
4. useReducer
  • 用于管理复杂状态逻辑,类似于 Redux 的 reducer。
  • 示例:
    const [state, dispatch] = useReducer(reducer, initialState);
    

结论

React 的生命周期方法和 Hooks 使得组件能够在不同阶段执行特定操作。类组件通过生命周期方法管理状态和副作用,而函数组件通过 Hooks 提供了更简洁的方式来处理状态和副作用。掌握这些概念可以帮助开发者更高效地构建和维护 React 应用。

您好,我是肥晨。
欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。

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

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

相关文章

数据库连接池实现

目录 前提&#xff1a;如果我要操作多个表&#xff0c;那么就会产生冗余的JDBC步骤&#xff0c;另一个弊端就是每次都需要数据库连接对象&#xff08;Connection&#xff09;&#xff0c;获取效率低下&#xff0c;每次使用时都需要先进行连接 数据库连接池的特点&#xff1a; …

软件测试基础三(前端知识)

前端基础 1. HTML&#xff08;超文本标记语言&#xff09; 1.1. 基本概念 定义&#xff1a;HTML 是用来描述网页的一种语言&#xff0c;指的是超文本标记语言&#xff08;Hyper Text Markup Language&#xff09;。它不是编程语言&#xff0c;而是一种标记语言&#xff0c;由…

优化用于传感应用的衬底集成波导技术

ANSYS HFSS 是一款功能强大的电磁仿真软件&#xff0c;支持为微流体生物传感器应用设计和分析衬底集成波导 &#xff08;SIW&#xff09; 技术。它为快速设计优化、材料选择、系统集成和虚拟原型制作提供了一个强大的平台。借助 ANSYS HFSS&#xff0c;研究人员和工程师可以高效…

设置HTTP会话(Session)的Cookie域

示例&#xff1a; server:servlet:session:cookie:domain: example.com该配置的作用&#xff1a; 跨子域访问&#xff1a;如果你的应用程序部署在多个子域下&#xff08;例如www.example.com和api.example.com&#xff09;&#xff0c;并且你希望用户在这些子域之间切换时保持…

微信小程序 uniapp 腾讯地图的调用

/* 提前在您的app.json上加上这些代码 "permission": { "scope.userLocation": { "desc": "你的位置信息将用于地图中定位" } …

Linux 开机自动挂载硬盘

在日常使用 Linux 系统的过程中&#xff0c;我们可能需要挂载一些机械硬盘或者移动硬盘来存储数据。手动挂载虽然简单&#xff0c;但每次重启后都需要重新操作&#xff0c;未免有些繁琐。那么&#xff0c;如何让硬盘在开机时自动挂载呢&#xff1f;本篇博客将详细介绍如何通过配…

[项目] C++基于多设计模式下的同步异步日志系统

[项目] C基于多设计模式下的同步&异步日志系统 文章目录 [项目] C基于多设计模式下的同步&异步日志系统日志系统1、项目介绍2、开发环境3、核心技术4、日志系统介绍4.1 日志系统的价值4.2 日志系统技术实现4.2.1 同步写日志4.2.2 异步写日志 5、相关技术知识5.1 不定参…

[论文阅读] | 智能体长期记忆

更新记录&#xff1a; 2024.11.2 人大高瓴长期记忆综述 文章目录 人大高瓴长期记忆综述智能体与环境交互记忆的来源/形式/操作来源&#xff1a;(1)当前任务历史信息 (2)其他任务的信息 (3)外部知识形式&#xff1a;如何表达记忆的内容&#xff0c;通过(1)文本 (2)参数(训练到模…

Rust 力扣 - 59. 螺旋矩阵 II

文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 使用一个全局变量current记录当前遍历到的元素的值 我们只需要一圈一圈的从外向内遍历矩阵&#xff0c;每一圈遍历顺序为上边、右边、下边、左边&#xff0c;每遍历完一个元素后current 我们需要注意的是如果上…

solidity中的继承

1.继承 继承是面向对象编程很重要的组成部分&#xff0c;可以显著减少重复代码。如果把合约看作是对象的话&#xff0c;solidity也是面向对象的编程&#xff0c;也支持继承。 规则 virtual: 父合约中的函数&#xff0c;如果希望子合约重写&#xff0c;需要加上virtual关键字。…

还不会使用MySQL的复合查询?一篇文章快速教会你

使用逻辑运算符 AND 用于同时满足多个条件。OR 用于满足任一条件 SELECT * FROM employees WHERE department Sales AND salary > 50000;从 employees 表中选取所有在 “Sales” 部门工作且薪水高于50,000的员工记录。 子查询 子查询是在一个 SELECT 语句中嵌套另一个 …

AppInventor2能否用网络摄像头画面作为屏幕的背景?

// 视频是否可以作为背景&#xff1f; // 有会员提问&#xff1a;能否用网络摄像头的实时画面作为屏幕的背景&#xff1f;就跟这个一样背景全覆盖&#xff1a; 摄像头画面是一个在线的网站链接视频流。 // 原先思路 // 1、目前原生组件无法直接实现这个功能&#xff0c;屏幕…

显示器接口

不同的显示输出接口支持的分辨率和刷新率各有差异&#xff0c;以下是一些常见接口的概述&#xff1a; 1. HDMI (High-Definition Multimedia Interface) 版本 1.4&#xff1a;支持最大分辨率 4K (3840x2160) 30Hz&#xff0c;1080p 120Hz。版本 2.0&#xff1a;支持最大分辨…

国产操作系统卖疯了!最营收7.84亿,最低1.5亿

最近看各种报道&#xff0c;似乎国产化有提速的绩效&#xff0c;那么既然如此&#xff0c;各个国产操作系统厂商是不是都起飞了呢&#xff1f; 周末闲暇之余&#xff0c;我们来看看各家的营收表现。 银河麒麟2024年1-9月一共卖了多少钱&#xff1f; 前几天中国软件发布了202…

django请求与响应

目录 一、请求Request 利用HTTP协议向服务器传参有几种途径 Django中的QueryDict对象 1> GET属性获取查询字符串Query String 参数 2> POST属性 获取请求体参数 3> META属性 获取请求头数据 4> 其他常用HttpRequest对象属性 二、响应Response 1> HttpR…

深度学习:抑制过拟合

过拟合问题 1.过拟合&#xff1a;当模型在训练数据上表现很好&#xff0c;但在未见过的测试数据上表现较差时&#xff0c;我们称之为过拟合。过拟合通常发生在模型过于复杂&#xff0c;参数过多&#xff0c;或者训练数据量不足的情况下。 2.权重过大&#xff1a;在过拟合的情况…

Python venv创建失败问题

在Ubuntu中&#xff0c;笔者需要创建虚拟环境时失败: python3.11 -m venv env 报错信息如下:Error: Command [****/env/bin/python3.11, -m, ensurepip, --upgrade, --default-pip] returned non-zero exit status 1. 尝试执行一下看看是什么错误: python3.11 -m ensurepip …

CDN加速实战:使用七牛云CDN加速阿里云OSS资源访问

今天是双11搞活动,在阿里云1元注册了个域名,想着在学CDN,想使用CDN做个加速项目,但是阿里的要收费,上网查了下七牛云的不收费,想着将七牛云的CDN结合阿里的DNS做个访问加速,刚好看到了阿里的一个文章,照着改了改,实践成功了。 阿里文章:使用CDN加速OSS资源访问_对象…

Git本地分支更新推送到远程主分支上

本地分支&#xff08;debug&#xff09;开发之前&#xff1a; git pull origin dev&#xff08;主分支&#xff09;git merge 这步merge可能会现异常&#xff1a;error&#xff1a;Merging is not possible because you have ynmerged files&#xff0c;出现冲突文件&#xff…

嵌入式学习——IIC协议

IIC&#xff08;Inter-Integrated Circuit&#xff09;是一种串行通信协议&#xff0c;由飞利浦公司于1980年代提出。它允许多个从设备通过两条线&#xff08;SDA和SCL&#xff09;与一个或多个主设备进行通信。IIC协议是多主、多从的&#xff0c;适合在短距离内的设备间通信。…