react-09React生命周期

1.react生命周期（旧版）

1.1react初始挂载时的生命周期

1:构造器-constructor

 // 构造器constructor(props) {console.log('1:构造器-constructor');super(props)// 初始化状态this.state = {count: 0}}

 2:组件将要挂载-componentWillMount

 // 组件将要挂载componentWillMount() {console.log('2:组件将要挂载-componentWillMount');}

3:开始渲染-render

render(){console.log('3:开始渲染-render');const {count} = this.statereturn(<div><h2>当前的和为{count}</h2><button onClick={this.add}>点我+1</button><button onClick={this.death}>卸载DOM</button></div>)}

 4:组件挂载完成-componentDidMount

// 组件挂载完成componentDidMount() {console.log('4:组件挂载完成-componentDidMount');}

 5:组件卸载-componentWillUnmount

// 组件卸载componentWillUnmount() {console.log('5:组件卸载-componentWillUnmount');}

代码实现演示

点击卸载dom后 

 整体代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Hello，React生命周期（旧）</title>
</head><body><!-- 容器 --><div id="test"></div><!-- {/* // 引入 React核心库 */} --><script src="https://unpkg.com/react@16/umd/react.production.min.js"></script><!-- {/* // 引入 react-dom 用于支持 react 操作 DOM */} --><script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script><!-- {/* // 引入 babel：1. ES6 ==> ES5 2. jsx ==> js */} --><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><!-- {/* // 引入 JSX 语法 */} --><script type="text/babel">// 1. 创建组件class Count extends React.Component {// 构造器constructor(props) {console.log('1:构造器-constructor');super(props)// 初始化状态this.state = {count: 0}}add=()=>{// 获取原状态const {count} = this.state// 状态更新this.setState({count: count+1})}death=()=>{ReactDOM.unmountComponentAtNode(document.getElementById('test'))}// 组件将要挂载componentWillMount() {console.log('2:组件将要挂载-componentWillMount');}// 组件挂载完成componentDidMount() {console.log('4:组件挂载完成-componentDidMount');}// 组件卸载componentWillUnmount() {console.log('5:组件卸载-componentWillUnmount');}render(){console.log('3:开始渲染-render');const {count} = this.statereturn(<div><h2>当前的和为{count}</h2><button onClick={this.add}>点我+1</button><button onClick={this.death}>卸载DOM</button></div>)}}ReactDOM.render(<Count />,document.getElementById('test'))</script>
</body></html>
 1.2.react更新数据setState

1:shouldComponentUpdate-判断是否需要更新

// 控制组件更新 默认不写此钩子函数 返回true 组件更新shouldComponentUpdate(nextProps, nextState) {   console.log('1:shouldComponentUpdate-判断是否需要更新');return true}

2:componentWillUpdate-组件将要更新

// 组件将要更新componentWillUpdate(nextProps, nextState) {console.log('2:componentWillUpdate-组件将要更新');}

3:开始渲染-render

 render(){console.log('3:开始渲染-render');const {count} = this.statereturn(<div><h2>当前的和为{count}</h2><button onClick={this.add}>点我+1</button><button onClick={this.death}>卸载DOM</button></div>)}

 4:componentDidUpdate-组件更新完成

// 组件更新完成componentDidUpdate(prevProps, prevState) {console.log('4:componentDidUpdate-组件更新完成');}

5:组件卸载-componentWillUnmount

// 组件卸载componentWillUnmount() {console.log('5:组件卸载-componentWillUnmount');}

整体代码 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Hello，React生命周期（旧）</title>
</head><body><!-- 容器 --><div id="test"></div><!-- {/* // 引入 React核心库 */} --><script src="https://unpkg.com/react@16/umd/react.production.min.js"></script><!-- {/* // 引入 react-dom 用于支持 react 操作 DOM */} --><script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script><!-- {/* // 引入 babel：1. ES6 ==> ES5 2. jsx ==> js */} --><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><!-- {/* // 引入 JSX 语法 */} --><script type="text/babel">// 1. 创建组件class Count extends React.Component {state = {count: 0}add=()=>{// 获取原状态const {count} = this.state// 状态更新this.setState({count: count+1})}death=()=>{ReactDOM.unmountComponentAtNode(document.getElementById('test'))}// 组件卸载componentWillUnmount() {console.log('5:组件卸载-componentWillUnmount');}// 控制组件更新 默认不写此钩子函数 返回true 组件更新shouldComponentUpdate(nextProps, nextState) {   console.log('1:shouldComponentUpdate-判断是否需要更新');return true}// 组件将要更新componentWillUpdate(nextProps, nextState) {console.log('2:componentWillUpdate-组件将要更新');}// 组件更新完成componentDidUpdate(prevProps, prevState) {console.log('4:componentDidUpdate-组件更新完成');}render(){console.log('3:开始渲染-render');const {count} = this.statereturn(<div><h2>当前的和为{count}</h2><button onClick={this.add}>点我+1</button><button onClick={this.death}>卸载DOM</button></div>)}}ReactDOM.render(<Count />,document.getElementById('test'))</script>
</body></html>
1.3.forceUpdate声明周期函数强制刷新

forceUpdate--》componentWillUpdate--》render--》componentDidUpdate--》componentWillUnmount

1.4父组件调用子组件render生命周期

componentWillReceiveProps--生命周期钩子函数---父组件调用子组件 第二次渲染，其他的调用子组件的生命周期如setState以后执行生命周期一致。

父组件A

 // 创建组件A--父组件class A extends React.Component {// 初始化状态state={carName:'奥迪'}// 事件changeCarName=()=>{ this.setState({carName: '宝马'})}render() {return (<div><div>A组件</div><button onClick={this.changeCarName}>修改车名</button>{/*将修改的车名传递给子组件--B*/}<B carName={this.state.carName} /></div>)}}

子组件B

 // 创建组件B--子组件class B extends React.Component {// 生命周期钩子函数---父组件调用子组件 第二次渲染componentWillReceiveProps() {console.log('b--componentWillReceiveProps');}render() {return (// B--props 接收父组件传递的props<div>B组件,接收父组件传递的props:{this.props.carName}</div>)}}
1.5 旧版生命周期总结 

        

基础开发中常用的生命周期钩子：

  • componentDidMount：初始化做的事情，开启定时器，发送网络请求，订阅消息。
  • render：渲染结构。
  • componentWillUnmount：收尾，关闭定时器，取消消息。

2.react生命周期(17)

componentWillMount，componentWillReceiveProps，componentWillUpdate，在新的react17上中要加前缀UNSAFE。

2.1getDerivedStateFromProps静态生命周期方法(使用频率少)

        允许组件在渲染前根据 props 的变化更新其内部状态。它在 render() 方法之前被调用，主要用于处理那些状态依赖于 props 变化的罕见场景。

1.注意

无法访问 this（即组件实例）

2.调用时机：

组件首次挂载时（类似于 constructor）

props 更新时（父组件重新渲染或 props 发生变化）

强制更新时（this.forceUpdate()）

3.返回值：

必须返回一个对象来更新状态，或返回 null 表示不更新状态

返回的新状态对象会与现有状态合并

4.使用场景：

罕见情况下，状态需要依赖于 props 的变化（例如，跟踪先前的 props 值）。

当 props 变化时重置状态（例如，父组件传递的 prop 变化时清空表单输入）。

5.代码展示：

class Example extends React.Component {state = {derivedValue: 0,prevValue: 0, // 用于存储先前的 prop 值};static getDerivedStateFromProps(nextProps, prevState) {// 仅在 props.value 变化时更新状态if (nextProps.value !== prevState.prevValue) {return {derivedValue: nextProps.value * 2, // 根据 prop 推导状态prevValue: nextProps.value, // 更新存储的先前 prop 值};}return null; // 无变化时不更新状态}render() {return <div>Derived Value: {this.state.derivedValue}</div>;}
}
2.2 getSnapshotBeforeUpdate (组件更新前捕获当前信息-DOM状态)

        主要用于组件更新前捕获当前信息，并将信息传递给componentDidUpdate,便于更新后进行对应的调整，

调用时机：在render后，DOM更新前：调用时机介于render与componentDidUpdate间。

接收参数：接收两个参数，prevProps（更新前的props）,prevState(更新前的state)。

使用场景：捕获DOM状态（列表更新，捕获滚动位置，更新后恢复滚动位置）。

componentDidUpdate配合使用：getSnapShotBeforeUpdate返回值作为它的第三个参数（snapshot）传递。在其中根据snapshot的值进行对应的操作。

使用getSnapShotBeforeUpdate保持滚动位置不变：

import React from 'react';class ScrollingList extends React.Component {constructor(props) {super(props);this.listRef = React.createRef();this.state = {items: ['Item 1', 'Item 2', 'Item 3'],};}componentDidMount() {setInterval(() => {this.setState(prevState => ({items: [`New Item ${prevState.items.length + 1}`, ...prevState.items],}));}, 1000);}getSnapshotBeforeUpdate(prevProps, prevState) {// 捕获更新前的滚动位置if (prevState.items.length < this.state.items.length) {const list = this.listRef.current;return list.scrollHeight - list.scrollTop;}return null;}componentDidUpdate(prevProps, prevState, snapshot) {// 根据快照调整滚动位置if (snapshot !== null) {const list = this.listRef.current;list.scrollTop = list.scrollHeight - snapshot;}}render() {return (<divref={this.listRef}style={{ height: '100px', overflow: 'auto', border: '1px solid black' }}>{this.state.items.map((item, index) => (<div key={index}>{item}</div>))}</div>);}
}export default ScrollingList;
 2.3总结

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

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

相关文章

【NVM】管理不同版本的node.js

【NVM】管理不同版本的node.js

目录 一、下载nvm 二、安装nvm 三、验证安装 四、配置下载镜像 五、使用NVM 前言&#xff1a;不同的node.js版本会让你在使用过程很费劲&#xff0c;nvm是一个node版本管理工具&#xff0c;通过它可以安装多种node版本并且可以快速、简单的切换node版本。 一、下载nvm htt…
阅读更多...
八大排序——冒泡排序/归并排序

八大排序——冒泡排序/归并排序

八大排序——冒泡排序/归并排序 一、冒泡排序 1.1 冒泡排序 1.2 冒泡排序优化 二、归并排序 1.1 归并排序&#xff08;递归&#xff09; 1.2 递归排序&#xff08;非递归&#xff09; 一、冒泡排序 1.1 冒泡排序 比较相邻的元素。如果第一个比第二个大&#xff0c;就交换…
阅读更多...
区块链随学随记

区块链随学随记

前情提要&#xff1a;本人技术栈为ganachehardhatpython ganache提供的是本地的区块链环境&#xff0c;相当于模拟以太坊&#xff0c;这样可以允许多个账户在本机交互。hardhat和remix都是区块链ide&#xff0c;用于编写和部署合约助记词有个数规定&#xff0c;只有满足这些个数…
阅读更多...
Android原生开发基础

Android原生开发基础

Android实战 Android 原生开发基础 知识点1 介绍了解2 系统体系架构3 四大应用组件4 移动操作系统优缺点5 开发工具6 配置工具7 下载相关资源8JDK下载安装流程9配置好SDK和JDK环境10 第一个Hello word11 AS开发前常用设置12模拟器使用运行13 真机调试14 AndroidUI基础布局15 加…
阅读更多...
网页版 deepseek 对话问答内容导出为 PDF 文件和 Word 文件的浏览器插件下载安装和使用说明

网页版 deepseek 对话问答内容导出为 PDF 文件和 Word 文件的浏览器插件下载安装和使用说明

文章目录 网页版 deepseek 浏览器扩展应用程序插件1. 预览效果2. 功能介绍3. 浏览器扩展应用程序下载3.1. 下载方式13.2. 下载方式24. 安装教程4.1. Chrome 浏览器安装步骤4.2. Edge 浏览器安装步骤5. 使用说明网页版 deepseek 浏览器扩展应用程序插件 1. 预览效果 预览效果 导…
阅读更多...
DBdriver使用taos数据库

DBdriver使用taos数据库

首先创建连接 连接后比如数据库里有三个库 选择其中的hypon 选中localhost&#xff0c;右键sql编辑器&#xff0c;打开sql控制台 就插入了一条数据
阅读更多...
【前端】【面试】如何实现图片渐进式加载？有几种方法

【前端】【面试】如何实现图片渐进式加载？有几种方法

前端图片渐进式加载 一、技术原理解析 渐进式加载是通过分阶段、按需加载图片&#xff0c;以提升用户体验和页面性能的优化技术。主要包括以下实现方式&#xff1a; 懒加载&#xff1a;基于IntersectionObserver API&#xff0c;当图片进入浏览器视口时才发起加载请求&#…
阅读更多...
Spring Boot 中的条件注解

Spring Boot 中的条件注解

Spring Boot条件注解的汇总&#xff1a; 注解作用判断依据使用场景ConditionalOnBean容器中存在指定Bean时&#xff0c;被注解的配置或Bean定义生效指定Bean在容器中存在依赖其他已存在Bean时配置相关功能ConditionalOnCheckpointRestore在特定检查点恢复相关条件满足时生效满…
阅读更多...
leetcode11-盛水最多的容器

leetcode11-盛水最多的容器

leetcode 11 思路 问题分析 拆解问题&#xff0c;面积 底 * 高 宽度&#xff1a;两个竖直线之间的距离&#xff0c;显然是 right - left高度&#xff1a;容器的水位受限于较短的那根竖直线的高度&#xff0c;所以高度为 min(height[left], height[right]) 本题其实很容易…
阅读更多...
HTTP：十二.HTTPS

HTTP：十二.HTTPS

HTTPS 概述 超文本传输安全协议（英语：HyperText Transfer Protocol Secure，缩写：HTTPS；常称为HTTP over TLS、HTTP over SSL或HTTP Secure）是一种通过计算机网络进行安全通信的传输协议。HTTPS经由HTTP进行通信，利用TLS加密数据包。 HTTPS的主要目的是提供对网站服务器…
阅读更多...
MySQL数据库（14）—— 使用C操作MySQL

MySQL数据库（14）—— 使用C操作MySQL

目录 一&#xff0c;下载库 二&#xff0c;安装库 三&#xff0c;使用库 3.1 连接数据库 3.2 发送SQL 3.3 获取结果 问题&#xff1a;为什么不使用C&#xff1f; 解答&#xff1a;使用C的库已经可以完成绝大部分MySQL操作了&#xff0c;并且C的库的使用更加复杂&#xff…
阅读更多...
Redis故障防御体系：构建七层免疫系统的设计哲学

Redis故障防御体系：构建七层免疫系统的设计哲学

当Redis遭遇写入阻塞或服务崩溃时&#xff0c;本质上是系统边界的多重防御机制被击穿。本文摒弃碎片化的解决方案&#xff0c;从系统工程的全局视角&#xff0c;构建七层递进式防御体系&#xff0c;揭示高可用架构的深层设计逻辑。 第一层&#xff1a;动态资源调度 —— 内存的…
阅读更多...
在线文本客服系统核心功能解析

在线文本客服系统核心功能解析

在线文本客服系统核心功能解析 在互联网大厂的Java求职者面试中&#xff0c;经常会被问到关于在线文本客服系统的实现和设计。本文通过一个故事场景来展示这些问题的实际解决方案。 第一轮提问 面试官&#xff1a;马架构&#xff0c;欢迎来到我们公司的面试现场。请问您对在…
阅读更多...
学成在线。。。

学成在线。。。

一：讲师管理 介绍：可以实现对讲师的分页展示，多条件组合分页查询，对讲师的添加，修改，删除操作。 针对于添加来说，使用requestBody注解，搭配postmapping接收数据，使用service层的对象，调用mapper方法，向数据库中保存数据。 修改： 先根据讲师id，查询出讲师，再去…
阅读更多...
Webug3.0通关笔记17 中级进阶（第01-05关）

Webug3.0通关笔记17 中级进阶（第01-05关）

目录 第一关 出来点东西吧 1.打开靶场 2.源码分析 3.源码修正 4.文件包含漏洞渗透 第二关 提交方式是怎样的啊&#xff1f; 1.打开靶场 2.源码分析 3.渗透实战 &#xff08;1&#xff09;bp改包法 &#xff08;2&#xff09;POST法渗透 第三关 我还是一个注入 1.打开…
阅读更多...
C语言复习笔记--内存函数

C语言复习笔记--内存函数

在复习完字符函数和字符串函数之后,今天让我们复习一下内存函数吧.这一块的东西不太多,并且与之前的字符串函数有一些地方很相似,所以这里应该会比较轻松. memcpy使用和模拟实现 老规矩,先看函数原型 void * memcpy ( void * destination, const void * source, size_t num );…
阅读更多...
【Unity AR开发插件】一、高效热更新：Unity AR 插件结合 HybridCLR 与 ARFoundation 的开源仓库分享

【Unity AR开发插件】一、高效热更新：Unity AR 插件结合 HybridCLR 与 ARFoundation 的开源仓库分享

摘要 本篇博客详细介绍了我基于 HybridCLR 与 AR Foundation 的 Unity AR 开发插件&#xff0c;旨在为开发者提供高效的跨平台热更新方案。文章从背景与动机出发&#xff0c;覆盖一键安装工具、环境配置、热更新数据制作与示例程序运行等核心模块&#xff0c;并展示代码结构与使…
阅读更多...
数据分析（四）：Python Pandas数据输入输出全流程指南

数据分析（四）：Python Pandas数据输入输出全流程指南

Python Pandas数据输入输出全流程指南 1. 引言 数据输入输出(I/O)是数据分析工作流中最基础也是最重要的环节之一。Pandas提供了丰富的数据读写接口&#xff0c;支持从各种文件格式和数据库中加载数据&#xff0c;以及将处理后的数据保存到不同存储系统中。本文将全面介绍Pan…
阅读更多...
人工智能与机器学习：Python从零实现性回归模型

人工智能与机器学习：Python从零实现性回归模型

🧠 向所有学习者致敬！ “学习不是装满一桶水，而是点燃一把火。” —— 叶芝 我的博客主页： https://lizheng.blog.csdn.net 🌐 欢迎点击加入AI人工智能社区！ 🚀 让我们一起努力，共创AI未来！ 🚀 前言 在 AI 的热潮中，很容易忽视那些让它得以实现的基础数学和技…
阅读更多...
Ubuntu18.04更改时区（图文详解）

Ubuntu18.04更改时区（图文详解）

Ubuntu18.04更改时区 1、前言2、更改时区3、总结 1、前言 记录一下Ubuntu18.04更改时区的过程&#xff0c;方便自己日后回顾&#xff0c;也可以给有需要的人提供帮助。 2、更改时区 输入下面的指令&#xff0c;进行时区选择 tzselect输入4选择亚洲&#xff0c;输入9选择中…
阅读更多...
最新文章

Copyright @ 2022~2023