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;研究人员和工程师可以高效…

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 我们需要注意的是如果上…

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

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

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

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

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

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

嵌入式学习——IIC协议

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

qt QStatusBar详解

1、概述 QStatusBar是Qt框架提供的一个小部件&#xff0c;用于在应用程序窗口底部显示状态信息。它可以显示一些固定的文本和图标&#xff0c;并且可以通过API动态更新显示内容。QStatusBar通常是一个水平的窗口部件&#xff0c;能够显示多行文本内容&#xff0c;非常适合用于…

大型语言模型的运行成本分析

大型语言模型 (LLM) 一直处于生成式 AI 革命的前沿&#xff0c;尤其是自 ChatGPT 出现以来。然而&#xff0c;它们的全部潜力尚未得到释放&#xff0c;而一个重大障碍是成本。将 LLM 纳入应用程序的费用范围从按需用例的几美分到在云环境中托管单个 LLM 实例的每月 20,000 美元…

Matlab高光谱遥感

原文链接&#xff1a;Matlab高光谱遥感https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247623643&idx5&sne4557ed43728f851140b100f42286988&chksmfa8da23ccdfa2b2a4d795bf4087f672faaa7082d1f52e046616ab7bf196a6eef89ea553d06b1&token1392391660&…

OPENAI官方prompt文档解析

官方文档地址:https://platform.openai.com/docs/guides/gpt-best-practices 文档中文版来源:OpenAI 官方提示工程指南 [译] | 宝玉的分享 (baoyu.io) 1.写清楚说明 如果prompt给的范围十分模糊或是过于宽泛,那么GPT就会开始猜测您想要的内容,从而导致生成的结果偏离预期. …

共模噪声和差模噪声

电源芯片加上负载和不加负载输出的纹波不一样&#xff0c;不加负载的情况下纹波比较小。 可以测量出DCDC电源的输出电压纹波为100Khz&#xff0c;刚好对应电源芯片的开关频率。可以看到纹波上面有一部分的小噪声&#xff0c;放大后用示波器观察频率为几Mhz。 对付上面的频率比…

DevOps赋能:优化业务价值流的实战策略与路径(上)

上篇&#xff1a;价值流引领与可视化体系构建 一、前言 在快速迭代的软件项目和产品开发生态中&#xff0c;我们始终围绕两个核心目标&#xff1a;一是确保每一项工作都能为客户创造实际价值&#xff0c;这是产品团队的核心使命&#xff1b;二是确保这些有价值的工作能够高效…

机器学习之fetch_olivetti_faces人脸识别--基于Python实现

fetch_olivetti_faces 数据集下载 fetch_olivetti_faceshttps://github.com/jikechao/olivettifaces sklearn.datasets.fetch_olivetti_faces(*, data_homeNone, shuffleFalse, random_state0, download_if_missingTrue, return_X_yFalse, n_retries3, delay1.0)[source] L…

HTML 语法规范——代码注释、缩进与格式、标签与属性、字符编码等

文章目录 一、代码注释1.1 使用注释的主要目的1.2 使用建议二、标签的使用2.1 开始标签和结束标签2.2 自闭合标签2.3 标签的嵌套2.4 标签的有效性三、属性四、缩进与格式4.1 一致的缩进4.2 元素单独占用一行4.3 嵌套元素的缩进4.4 避免冗长的行五、字符编码六、小结在开发 HTML…

Charles简单压力测试

1.接口请求次数&#xff0c;并发量&#xff0c;请求延迟时间均可配置 1.1选中需要进行测试的接口&#xff0c;鼠标右键选中【repeat advance】 2.设置并发参数 下面的图中&#xff0c;选择了1个接口&#xff0c;每次迭代中1个接口同时请求&#xff0c;迭代1000次&#xff08;…