react 组件生命周期

ops/2024/12/5 4:56:17/

1. 挂载阶段(Mounting)

在函数式组件中,可以使用`useEffect`钩子函数来模拟`componentDidMount`的功能

javascript">import { useEffect, useState } from "react";const MyComponent = () => {const [data, setData] = useState(null);useEffect(() => {fetch("https://api.example.com/data").then((response) => response.json()).then((data) => setData(data));}, []);return <div>{data && <p>{data.message}</p>}</div>;};

2. 更新阶段(Updating)

在函数式组件中,可以在`useEffect`钩子函数中通过检查依赖项的变化来模拟`componentDidUpdate`的功能。

javascript">import { useEffect, useState } from "react";const MyComponent = () => {const [count, setCount] = useState(0);useEffect(() => {console.log("Component updated");}, [count]);return (<div><p>Count: {count}</p><button onClick={() => setCount(count + 1)}>Increment</button></div>);};

3. 卸载阶段(Unmounting)

在函数式组件中,如果使用`useEffect`钩子函数来设置定时器等副作用操作,可以通过返回一个清理函数来模拟`componentWillUnmount`的功能。

javascript">import React, { useEffect, useState } from "react";const MyComponent = () => {useEffect(() => {const timer = setInterval(() => {// 执行定时任务}, 1000);return () => clearInterval(timer);}, []);return <div>{/* 组件内容 */}</div>;};


http://www.ppmy.cn/ops/139185.html

相关文章

Pytest --capture 参数详解:如何控制测试执行过程中的输出行为

--capture 选项用于控制测试用例执行过程中标准输出&#xff08;stdout&#xff09;和标准错误输出&#xff08;stderr&#xff09;的捕获行为。 --capture 的选项值&#xff1a; fd&#xff08;默认&#xff09; 捕获文件描述符级别的输出&#xff08;stdout 和 stderr&#x…

智能合约开发框架--Hardhat

Hardhat是一个编译、部署、测试和调试以太坊应用的开发环境。它可以帮助开发人员管理和自动化构建智能合约和dApps过程中固有的重复性任务&#xff0c;并围绕这一工作流程轻松引入更多功能。这意味着hardhat在最核心的地方是编译、运行和测试智能合约。 一、Hardhat的优点 Deb…

负载均衡指南:Nginx与HAProxy的配置与优化

在现代网络应用中&#xff0c;负载均衡是确保高可用性和高性能的关键技术。通过将流量分配到多台服务器上&#xff0c;负载均衡器能够有效提升系统的处理能力&#xff0c;并防止单点故障。本文将详细介绍两种常见的负载均衡器——Nginx和HAProxy的配置与优化方法&#xff0c;并…

iOS——MVC、MVP、MVVM

MVC MVC模式是将应用程序分成三个部分的一种架构模式&#xff0c;一般分为&#xff1a;Model(模型&#xff09;,View(视图&#xff09;,Controller(控制器&#xff09;。各部分功能如下&#xff1a; Model:负责数据的管理&#xff0c;包括数据的结构和逻辑处理&#xff0c;以…

Ubantu系统非root用户安装docker教程

非root用户没有超级权限&#xff0c;根据docker安装教程安装完毕会发现无法拉取镜像&#xff0c;或者每次运行docker都需要加上sudo&#xff0c;输入密码验证。 解决办法如下&#xff1a; 1、创建docker用户组 sudo groupadd docker2、将非root用户&#xff08;当前用户&am…

Linux - 前端程序员常用的 Linux 命令

一、 CentOS (Community Enterprise Operating System) Linux 系统中一切皆文件 社区企业操作系统&#xff0c;是Linux 发行版本之一&#xff0c;来自于 Red Hat Enterprise Linux 依照 开源代码 规定释出的源代码编译成的。 由于出自同样的源码&#xff0c;因此有些要求高度稳…

【NLP高频面题 - LLM架构篇】大模型使用SwiGLU相对于ReLU有什么好处?

【NLP高频面题 - LLM架构篇】大模型使用SwiGLU相对于ReLU有什么好处&#xff1f; 重要性&#xff1a;★★★ &#x1f4af; NLP Github 项目&#xff1a; NLP 项目实践&#xff1a;fasterai/nlp-project-practice 介绍&#xff1a;该仓库围绕着 NLP 任务模型的设计、训练、优化…

SQLite:DDL(数据定义语言)的基本用法

SQLite&#xff1a;DDL&#xff08;数据定义语言&#xff09;的基本用法 1 主要内容说明2 相关内容说明2.1 创建表格&#xff08;create table&#xff09;2.1.1 SQLite常见的数据类型2.1.1.1 integer&#xff08;整型&#xff09;2.1.1.2 text&#xff08;文本型&#xff09;2…