React生命周期以及Hook

React生命周期可概括为以下关键阶段(针对类组件,函数组件主要通过Hooks实现类似功能):
挂载(Mounting):
constructor:初始化state和绑定事件处理函数。
render:返回组件的UI表示。
componentDidMount:组件挂载到DOM后执行,适合引入任何需要DOM节点的初始化工作(如网络请求、订阅等)。
更新(Updating):
render:重新渲染组件。
componentDidUpdate:在更新发生后立即调用,可以执行DOM操作或更新数据。
shouldComponentUpdate:决定组件是否应该更新,返回布尔值。
getDerivedStateFromProps:在更新前调用,用于在props变化时更新state。
卸载(Unmounting):
componentWillUnmount:在组件卸载和销毁之前调用,用于执行必要的清理操作(如取消网络请求、移除订阅等)。
错误处理(Error Handling):
getDerivedStateFromError 或 componentDidCatch:捕获子组件树中的错误并执行反应。
注意:React 16引入的Fiber架构和React 18的Concurrent Mode对生命周期有一定影响,部分生命周期方法被标记为不推荐使用(如componentWillMount、componentWillReceiveProps、componentWillUpdate),建议使用getDerivedStateFromProps、componentDidMount、shouldComponentUpdate和新的getSnapshotBeforeUpdate等方法进行替代。

 

React Hook 是 React 16.8 版本引入的一项特性,它允许在函数组件中使用状态(state)、生命周期方法、副作用等 React 的特性,而无需编写类组件。Hook 的主要目的是让函数组件具备了更多类组件的功能,同时让代码更加清晰、简洁,并且更容易复用逻辑。
React Hook 的主要特点
状态管理:Hook 使得函数组件能够拥有状态。在 React 16.8 之前,函数组件是无状态的,只能接收 props 并返回 JSX。通过引入 useState Hook,函数组件可以拥有自己的状态。
副作用处理:useEffect Hook 用于在函数组件中执行副作用操作,如数据获取、订阅和手动更改 React 组件的 DOM 输出等。它类似于类组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 生命周期方法的组合。
自定义 Hook:开发者可以创建自定义的 Hook,用于在组件之间复用状态逻辑或其他逻辑。自定义 Hook 是一个以 use 开头的函数,它内部可以调用其他 Hook。
React 常用 Hook
useState:用于在函数组件中添加状态管理。它接收一个初始状态作为参数,并返回一个状态值和一个用于更新这个状态的函数。
示例代码:
jsx
   import React, { useState } from 'react';

   function Counter() {
     const [count, setCount] = useState(0);

     const increment = () => {
       setCount(count + 1);
     };

     return (
       <div>
         <p>Count: {count}</p>
         <button onClick={increment}>Increment</button>
       </div>
     );
   }
   
useEffect:用于在函数组件中执行副作用操作。它接收一个函数作为参数,该函数在组件渲染到屏幕后执行。useEffect 还可以返回一个清理函数,用于在组件卸载时执行清理操作,如取消订阅、移除事件监听器等。
示例代码:
jsx
   import React, { useState, useEffect } from 'react';

   function Example() {
     const [count, setCount] = useState(0);

     useEffect(() => {
       document.title = `You clicked ${count} times`;

       return () => {
         // 清理工作
       };
     }, [count]); // 仅当 count 变化时执行副作用

     return (
       <div>
         <p>You clicked {count} times</p>
         <button onClick={() => setCount(count + 1)}>Click me</button>
       </div>
     );
   }
   
useContext:用于在函数组件中订阅 React 的上下文(context)。它通过接收一个上下文对象作为参数,并返回该上下文的当前值。这使得跨组件共享数据变得更加容易。
useRef:用于在函数组件中创建和访问 ref。它返回一个可变的 ref 对象,其 .current 属性被初始化为传入的参数(initialValue)。useRef 返回的 ref 对象在组件的整个生命周期内保持不变。
useReducer:是 useState 的另一种形式,它适用于管理更复杂的组件状态逻辑。useReducer 接收一个 reducer 函数和一个初始状态作为参数,并返回一个状态值和一个用于更新状态的 dispatch 方法。
React Hook 的优势
代码重用:通过自定义 Hook,可以在不同的组件之间复用状态逻辑和其他逻辑。
逻辑与 UI 分离:Hook 使得组件逻辑更加清晰,有助于将 UI 渲染逻辑与状态更新逻辑分离。
减少类组件的使用:随着 Hook 的引入,函数组件变得更加强大,减少了对类组件的需求,使得 React 组件的编写更加灵活和简洁。
总之,React Hook 是 React 框架中的一项重要特性,它极大地扩展了函数组件的功能和灵活性,使得 React 应用程序的开发变得更加高效和便捷。

当然可以。下面我将给出一个React Hooks的应用实例,该实例将演示如何在函数组件中使用useState和useEffect Hooks来创建一个简单的计数器组件,该组件会在组件挂载后每秒自动增加计数,并允许用户通过按钮手动增加计数。
计数器组件示例
jsx
import React, { useState, useEffect } from 'react';

function Counter() {
  // 使用useState Hook声明一个名为count的状态变量,并初始化为0
  const [count, setCount] = useState(0);

  // 使用useEffect Hook来处理副作用
  // 这个副作用将在组件挂载后每秒执行一次,用于更新count状态
  useEffect(() => {
    // 设置一个定时器,每秒调用一次
    const intervalId = setInterval(() => {
      // 更新状态
      setCount(prevCount => prevCount + 1);
    }, 1000);

    // 返回一个清理函数,用于在组件卸载时清除定时器
    return () => {
      clearInterval(intervalId);
    };
  }, []); // 空依赖数组意味着这个effect只在组件挂载时运行一次

  // 定义一个处理按钮点击的函数
  const handleIncrement = () => {
    // 更新状态
    setCount(prevCount => prevCount + 1);
  };

  // 返回组件的JSX表示
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
}

export default Counter;
解析
useState Hook:用于在函数组件中添加状态。在这个例子中,我们创建了一个名为count的状态变量,并通过setCount函数来更新它的值。
useEffect Hook:用于在函数组件中处理副作用。在这个例子中,我们使用了useEffect来设置一个定时器,每秒调用一次,每次调用时都会通过setCount函数来更新count的状态。我们还返回了一个清理函数,用于在组件卸载时清除定时器,避免内存泄漏。
组件渲染:每当count的状态更新时,组件都会重新渲染,显示最新的计数。
按钮交互:用户可以通过点击按钮来触发handleIncrement函数,该函数将调用setCount函数来手动增加计数。
这个示例展示了React Hooks的强大功能,使得函数组件能够处理状态和生命周期,同时保持代码的简洁性和可读性。

 

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

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

相关文章

Element-UI Plus 暗黑主题切换及自定义主题色

1. 暗黑主题切换 在main.js中引入下面文件 import element-plus/theme-chalk/dark/css-vars.css安装 vueuse/core pnpm add vueuse/coreApp.vue 添加下面代码 使用了 useDark() 的页面才会从 localStorage中读取当前主题状态&#xff0c;否则&#xff0c;刷新页面就会恢复默…

LeetCode讲解篇之1043. 分隔数组以得到最大和

文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 对于这题我们这么考虑&#xff0c;我们选择以数字的第i个元素做为分隔子数组的右边界&#xff0c;我们需要计算当前分隔子数组的长度为多少时能让数组[0, i]进行分隔数组的和最大 我们用数组f表示[0, i)区间内的…

docker 部署 Seatunnel 和 Seatunnel Web

docker 部署 Seatunnel 和 Seatunnel Web 说明&#xff1a; 部署方式前置条件&#xff0c;已经在宿主机上运行成功运行文件采用挂载宿主机目录的方式部署SeaTunnel Engine 采用的是混合模式集群 编写Dockerfile并打包镜像 Seatunnel FROM openjdk:8 WORKDIR /opt/seatunne…

自动驾驶-问题笔记-待解决

参考线的平滑方法 参考线平滑算法主要有三种&#xff1a; 离散点平滑&#xff1b;螺旋曲线平滑&#xff1b;多项式平滑&#xff1b; 参考链接&#xff1a;参考线平滑 对于平滑方法&#xff0c;一直不太理解平滑、拟合以及滤波三者的作用与区别&#xff1b; 规划的起点&#x…

leetcode第189题:轮转数组(C语言版)

思路1&#xff08;不推荐&#xff09; 保存数组最后一个元素&#xff0c;然后数组全体元素后移一位&#xff0c;把保存的最后一个元素存放到数组的第一个位置&#xff0c;重复这一操作&#xff0c;直到执行完了k次。 时间复杂度&#xff1a;需要用k次循环&#xff0c;里面套一层…

MySQL的驱动安装

1、下载并安装MySQL 下载地址&#xff1a; 建议在下列框中选择LTS长期支持版本&#xff0c;下载对应的MSI安装文件。 安装完成后&#xff0c;将MySQL的环境bin路径添加到环境变量中。 可以运行MySQL Configurator进行配置&#xff0c;主要设置密码&#xff0c;并初始化。其余…

Ruby 数组(Array)

Ruby 数组&#xff08;Array&#xff09; 引言 Ruby&#xff0c;作为一种高级编程语言&#xff0c;以其简洁明了的语法和强大的功能而闻名。在Ruby中&#xff0c;数组&#xff08;Array&#xff09;是一种基本的数据结构&#xff0c;用于存储一系列有序的元素。本文将深入探讨…

【五分钟学会】YOLO11 自定义数据集从训练到部署

数据集地址 数据集包含 360 张红血细胞图像及其注释文件&#xff0c;分为训练集与验证集。训练文件夹包含 300 张带有注释的图像。测试和验证文件夹都包含 60 张带有注释的图像。我们对原始数据集进行了一些修改以准备此 CBC 数据集&#xff0c;并将数据集分成三部分。在360张…

<<迷雾>> 第8章 学生时代的走马灯(3)--走马灯 示例电路

几个首尾相连的触发器使用同一个控制端&#xff0c;能同时触发 info::操作说明 鼠标单击开关切换开合状态 注: 其中 CP 为按钮开关, 每点击一次, Q 的输出前进一级 注: 第一个触发器的输出端 Q 需要先置入高电平. 如果重置了电路, 可外接电源先使第一个 Q 置入高电平. 另: 因为…

【Windows】在任务管理器中隐藏进程

在此前的一篇&#xff0c;我们已经介绍过了注入Dll 阻止任务管理器结束进程 -- Win 10/11。本篇利用 hook NtQuerySystemInformation 并进行断链的方法实现进程隐身&#xff0c;实测支持 taskmgr.exe 的任意多进程隐身。 任务管理器 代码&#xff1a; // dllmain.cpp : 定义 …

【中间件学习】Git的命令和企业级开发

一、Git命令 1.1 创建Git本地仓库 仓库是进行版本控制的一个文件目录。我们要想对文件进行版本控制&#xff0c;就必须创建出一个仓库出来。创建一个Git本地仓库对应的命令是 git init &#xff0c;注意命令要在文件目录下执行。 hrxlavm-1lzqn7w2w6:~/gitcode$ pwd /home/hr…

No.10 笔记 | PHP学习指南:PHP数组掌握

本指南为PHP开发者提供了一个全面而简洁的数组学习路径。从数组的基本概念到高级操作技巧&#xff0c;我们深入浅出地解析了PHP数组的方方面面。无论您是初学者还是寻求提升的中级开发者&#xff0c;这份指南都能帮助您更好地理解和运用PHP数组&#xff0c;提高编码效率和代码质…

python之运算符

1、算术运算符 算术运算符常用的有&#xff1a;&#xff0c;-&#xff0c;*&#xff0c; &#xff0c;/&#xff0c;//&#xff0c;%&#xff0c;>>,<< 1.1、加 常见的是算术相加&#xff0c;还有一种是字符串拼接。 a 10 b 20 print(a b) c "My &quo…

Python中的观察者模式:从基础到实战

引言 在软件开发中&#xff0c;设计模式是解决特定问题的通用解决方案。观察者模式&#xff08;Observer Pattern&#xff09;是其中一种非常有用的模式&#xff0c;它定义了对象之间的一对多依赖关系&#xff0c;当一个对象状态发生变化时&#xff0c;所有依赖于它的对象都会…

基于facefusion的换脸

FaceFusion是一个引人注目的开源项目&#xff0c;它专注于利用深度学习技术实现视频或图片中的面部替换。作为下一代换脸器和增强器&#xff0c;FaceFusion在人脸识别和合成技术方面取得了革命性的突破&#xff0c;为用户提供了前所未有的视觉体验。 安装 安装基础软件 安装…

注册安全分析报告:科研诚信查询平台无验证方式导致安全隐患

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 1. 暴力破解密码&#xff0c;造成用户信息泄露 2. 短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉 3. 带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造…

15分钟学 Python 第40天:Python 爬虫入门(六)第一篇

Day40 &#xff1a;Python 爬取豆瓣网前一百的电影信息 1. 项目背景 在这个项目中&#xff0c;我们将学习如何利用 Python 爬虫技术从豆瓣网抓取前一百部电影的信息。通过这一练习&#xff0c;您将掌握网页抓取的基本流程&#xff0c;包括发送请求、解析HTML、存储数据等核心…

Elasticsearch基础_2.数据类型

文章目录 一、基本的数据类型1.1、keyword1.2、text1.3、数值类型1.4、布尔类型1.5、时间类型 二、复杂的数据类型三、字段映射 一、基本的数据类型 1.1、keyword keyword类型是不进行切分的字符串类型。这里的“不进行切分”指的是&#xff1a;在索引时&#xff0c;对keyword…

m4a怎么转换成mp3?音频转换MP3只需要这6个小工具!

m4a怎么转换成mp3&#xff1f;M4A和MP3是两种常见的音频格式&#xff0c;M4A通常使用AAC&#xff08;高级音频编码&#xff09;进行压缩&#xff0c;提供更高的音质和更小的文件体积&#xff0c;特别适合在Apple设备上使用。而MP3则以其高压缩比和广泛的兼容性著称&#xff0c;…

《Linux从小白到高手》理论篇:Linux的系统服务管理

值此国庆佳节&#xff0c;深宅家中&#xff0c;闲来无事&#xff0c;就多写几篇博文。本篇详细深入介绍Linux的系统服务管理。 系统服务通常在系统启动时自动启动&#xff0c;并在后台持续运行&#xff0c;为系统和用户提供特定的功能。例如&#xff0c;网络服务、打印服务、数…