游戏网站怎么做/不收费推广网站有哪些


🌈个人主页: 鑫宝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 和 componentDidMountconst [count, setCount] = useState(0);// 相当于 componentDidMount 和 componentDidUpdateuseEffect(() => {document.title = `点击次数:${count}`;}, [count]);// 相当于 componentDidMount 和 componentWillUnmountuseEffect(() => {const handler = () => console.log('窗口大小改变');window.addEventListener('resize', handler);// 清理函数return () => {window.removeEventListener('resize', handler);};}, []);return <div>计数:{count}</div>;
}
七、总结
React 生命周期方法为我们提供了在组件不同阶段执行代码的机会。合理使用这些方法可以:
- 优化组件性能
- 正确处理副作用
- 管理组件状态
- 避免内存泄漏
在实际开发中,最常用的生命周期方法是:
- constructor:初始化
- componentDidMount:副作用处理
- componentDidUpdate:更新后的操作
- componentWillUnmount:清理工作
随着 React Hooks 的普及,函数组件正在逐渐取代类组件。但理解生命周期概念对于深入理解 React 的工作原理仍然至关重要。

相关文章:

【React】React 生命周期完全指南
🌈个人主页: 鑫宝Code 🔥热门专栏: 闲话杂谈| 炫酷HTML | JavaScript基础 💫个人格言: "如无必要,勿增实体" 文章目录 React 生命周期完全指南一、生命周期概述二、生命周期的三个阶段2.1 挂载阶段&a…...

【NLP】使用 SpaCy、ollama 创建用于命名实体识别的合成数据集
命名实体识别 (NER) 是自然语言处理 (NLP) 中的一项重要任务,用于自动识别和分类文本中的实体,例如人物、位置、组织等。尽管它很重要,但手动注释大型数据集以进行 NER 既耗时又费钱。受本文 ( https://huggingface.co/blog/synthetic-data-s…...

【C++练习】二进制到十进制的转换器
题目:二进制到十进制的转换器 描述 编写一个程序,将用户输入的8位二进制数转换成对应的十进制数并输出。如果用户输入的二进制数不是8位,则程序应提示用户输入无效,并终止运行。 要求 程序应首先提示用户输入一个8位二进制数。…...

Vue功能菜单的异步加载、动态渲染
实际的Vue应用中,常常需要提供功能菜单,例如:文件下载、用户注册、数据采集、信息查询等等。每个功能菜单项,对应某个.vue组件。下面的代码,提供了一种独特的异步加载、动态渲染功能菜单的构建方法: <s…...

云技术基础学习(一)
内容预览 ≧∀≦ゞ 声明导语云技术历史 云服务概述云服务商与部署模式1. 公有云服务商2. 私有云部署3. 混合云模式 云服务分类1. 基础设施即服务(IaaS)2. 平台即服务(PaaS)3. 软件即服务(SaaS) 云架构云架构…...

【优选算法篇】微位至简,数之恢宏——解构 C++ 位运算中的理与美
文章目录 C 位运算详解:基础题解与思维分析前言第一章:位运算基础应用1.1 判断字符是否唯一(easy)解法(位图的思想)C 代码实现易错点提示时间复杂度和空间复杂度 1.2 丢失的数字(easy࿰…...

MFC工控项目实例二十九主对话框调用子对话框设定参数值
在主对话框调用子对话框设定参数值,使用theApp变量实现。 子对话框各参数变量 CString m_strTypeName; CString m_strBrand; CString m_strRemark; double m_edit_min; double m_edit_max; double m_edit_time2; double …...

Java | Leetcode Java题解之第546题移除盒子
题目: 题解: class Solution {int[][][] dp;public int removeBoxes(int[] boxes) {int length boxes.length;dp new int[length][length][length];return calculatePoints(boxes, 0, length - 1, 0);}public int calculatePoints(int[] boxes, int l…...

【前端】Svelte:响应性声明
Svelte 的响应性声明机制简化了动态更新 UI 的过程,让开发者不需要手动追踪数据变化。通过 $ 前缀与响应式声明语法,Svelte 能够自动追踪依赖关系,实现数据变化时的自动重新渲染。在本教程中,我们将详细探讨 Svelte 的响应性声明机…...

PostgreSQL 性能优化全方位指南:深度提升数据库效率
PostgreSQL 性能优化全方位指南:深度提升数据库效率 别忘了请点个赞收藏关注支持一下博主喵!!! 在现代互联网应用中,数据库性能优化是系统优化中至关重要的一环,尤其对于数据密集型和高并发的应用而言&am…...

Flutter鸿蒙next 使用 BLoC 模式进行状态管理详解
1. 引言 在 Flutter 中,随着应用规模的扩大,管理应用中的状态变得越来越复杂。为了处理这种复杂性,许多开发者选择使用不同的状态管理方案。其中,BLoC(Business Logic Component)模式作为一种流行的状态管…...

Gen-RecSys——一个通过生成和大规模语言模型发展起来的推荐系统
概述 生成模型的进步对推荐系统的发展产生了重大影响。传统的推荐系统是 “狭隘的专家”,只能捕捉特定领域内的用户偏好和项目特征,而现在生成模型增强了这些系统的功能,据报道,其性能优于传统方法。这些模型为推荐的概念和实施带…...

Android 重新定义一个广播修改系统时间,避免系统时间混乱
有时候,搞不懂为什么手机设备无法准确定义系统时间,出现混乱或显示与实际不符,需要重置或重新设定一次才行,也是真的够无语的!! vendor/mediatek/proprietary/packages/apps/MtkSettings/AndroidManifest.…...

第3章:角色扮演提示-Claude应用开发教程
更多教程,请访问claude应用开发教程 设置 运行以下设置单元以加载您的 API 密钥并建立 get_completion 辅助函数。 !pip install anthropic# Import pythons built-in regular expression library import re import anthropic# Retrieve the API_KEY & MODEL…...

【FAQ】HarmonyOS SDK 闭源开放能力 —Vision Kit
1.问题描述: 人脸活体检测页面会有声音提示,如何控制声音开关? 解决方案: 活体检测暂无声音控制开关,但可通过其他能力控制系统音量,从而控制音量。 活体检测页面固定音频流设置的是8(无障碍…...

【问题解决】Tomcat由低于8版本升级到高版本使用Tomcat自带连接池报错无法找到表空间的问题
问题复现 项目上历史项目为解决漏洞扫描从Tomcat 6.0升级到了9.0版本,服务启动的日志显示如下警告,数据源是通过JNDI方式在server.xml中配置的,控制台上狂刷无法找到表空间的错误(没截图) 报错: 06-Nov-…...

Git LFS
Git LFS(Git Large File Storage)是一个用于管理和版本控制大文件的工具,它扩展了 Git 的功能,帮助处理大文件或二进制文件的存储和管理问题。 为什么需要 Git LFS? Git 默认是针对文本文件进行优化的,尤…...

基于Redis缓存机制实现高并发接口调试
创建接口 这里使用的是阿里云提供的接口服务直接做的测试,接口地址 curl http://localhost:8080/initData?tokenAppWithRedis 这里主要通过参数cacheFirstfalse和true来区分是否走缓存,正常的业务机制可能是通过后台代码逻辑自行控制的,这…...

数字化转型实践:金蝶云星空与钉钉集成提升企业运营效率
数字化转型实践:金蝶云星空与钉钉集成提升企业运营效率 本文介绍了深圳一家电子设备制造企业在数字化转型过程中,如何通过金蝶云星空与钉钉的高效集成应对挑战、实施解决方案,并取得显著成果。集成项目在提高沟通效率、自动化审批流程和监控异…...

Flutter 鸿蒙next 中使用 MobX 进行状态管理
Flutter & 鸿蒙next 中使用 MobX 进行状态管理 在应用开发中,状态管理是一个至关重要的环节,特别是在复杂的Flutter或鸿蒙next项目中。状态的变化往往会影响UI的更新,因此,选择一种高效、灵活的状态管理工具显得尤为重要。Mo…...

1.62亿元!812个项目立项!上海市2024年度“科技创新行动计划”自然科学基金项目立项
本期精选SCI&EI ●IEEE 1区TOP 计算机类(含CCF); ●EI快刊:最快1周录用! 知网(CNKI)、谷歌学术期刊 ●7天录用-检索(100%录用),1周上线; 免费稿件评估 免费匹配期…...

Redis数据库测试和缓存穿透、雪崩、击穿
Redis数据库测试实验 实验要求 1.新建一张user表,在表内插入10000条数据。 2.①通过jdbc查询这10000条数据,记录查询时间。 ②通过redis查询这10000条数据,记录查询时间。 3.①再次查询这一万条数据,要求根据年龄进行排序&#…...

[vulnhub] DarkHole: 2
https://www.vulnhub.com/entry/darkhole-2,740/ 端口扫描主机发现 探测存活主机,185是靶机 # nmap -sP 192.168.75.0/24 Starting Nmap 7.94SVN ( https://nmap.org ) at 2024-11-08 18:02 CST Nmap scan report for 192.168.75.1 Host is up (0.…...

《XGBoost算法的原理推导》12-2 t轮迭代中对样本i的预测值 公式解析
本文是将文章《XGBoost算法的原理推导》中的公式单独拿出来做一个详细的解析,便于初学者更好的理解。 好的,公式(12-2)表示的是 XGBoost 在第 t t t 轮迭代中对样本 i i i 的预测值。它说明了在第 t t t 轮迭代中,模型的预测是通过累加之前…...

./bin/mindieservice_daemon启动成功
接MindIE大模型测试及报错Fatal Python error: PyThreadState_Get: the function must be called with the GIL held,-CSDN博客经过调整如下红色部分参数,昇腾310P3跑起来了7b模型: rootdev-8242526b-01f2-4a54-b89d-f6d9c57c692d-qjhpf:/home/apulis-de…...

Linux: network: ip link M-DOWN的具体含义是什么?
文章目录 参考简介实例代码解释openstack上的显示如果是在一个interface上建立了vlan参考 https://unix.stackexchange.com/questions/348327/using-ip-what-does-m-down-mean www.policyrouting.org/iproute2.doc.html#ss9.1 简介 是指上一级的接口的状态。 实例 4: ersp…...

Spring中的过滤器和拦截器
Spring中的过滤器和拦截器 一、引言 在Spring框架中,过滤器(Filter)和拦截器(Interceptor)是实现请求处理的两种重要机制。它们都基于AOP(面向切面编程)思想,用于在请求的生命周期…...

leetcode20.括号匹配
题目描述 给定一个只包括 ‘(’,‘)’,‘{’,‘}’,‘[’,‘]’ 的字符串 s ,判断字符串是否有效。 有效字符串需满足: 左括号必须用相同类型的右括号闭合。 左括号必须以正确的顺序闭合。 每个…...

Unity性能优化-具体操作
批量渲染是通过减少CPU向GPU发送渲染命令(DrawCall)的次数,以及减少GPU切换渲染状态的次数,尽量让GPU一次多做一些事情,来提升逻辑线和渲染线的整体效率。 Draw Call性能消耗原因是命令从Runtime到Driver的过程中&…...

【嵌入式开发——ARM】1ARM架构
嵌入式领域,使用ARM架构的芯片公司可不占少数吧,intel的x86架构主要占据PC、服务器市场,ARM架构主要占据移动市场。x86架构和ARM架构不同的主要原因,是背后使用的计算机指令集不同。计算机有自己的语言系统(汇编&#…...