React之生命周期

React之生命周期

旧版本，函数组件是没有生命周期的。新版本中通过useEffect触发函数的生命周期

一、基于类组件的生命周期

React的组件生命周期分为挂载阶段、更新阶段和销毁阶段。因为React的state不具有Vue的响应式，所以并没有create阶段

1、挂载阶段： 【组件被创建并插入到DOM中的过程】

  • constructor：组件被创建时调用，用于初始化状态和绑定方法。

  • static getDerivedStateFromProps：在组件被创建和重新渲染之前调用，用于根据props更新状态。

  • 【已废弃】componentWillMount: 组件即将挂载，已经被废弃，向下兼容请使用【UNSAFE_componentWillMount】

    • 执行1次
    • 特点：可以访问state、不能操作DOM

  • render: 对组件视图结构进行编译【必须定义的一个钩子】

    • 先默认执行1次，后去每次setState都会执行一次
    • 特点：可以访问state、不能操作DOM

  • componentDidMount: 组件挂载完成

    • 执行一次
    • 特点： 可以访问state，也能操作DOM
    • 应用场景：发送请求；初始化第三方插件
import { Component } from 'react'export default class Home extends Component {state = {title: 'home'}clickUpdate = () => {this.setState({title: '主页'})}UNSAFE_componentWillMount(): void {console.log(this.state.title) // 'title'console.log(document.querySelector('.home_box')) // null}render() {console.log(this.state.title, 'render') // 'title'console.log(document.querySelector('.home_box'), 'render') // nullreturn (<><div className="home_box">{this.state.title}</div><button onClick={this.clickUpdate}>获取DOM</button></>)}componentDidMount(): void {console.log(this.state.title) // 'title'console.log(document.querySelector('.home_box')) // <div class="home_box">home</div>}
}

2、更新阶段【组件的props或state发生变化时的过程】

  • static getDerivedStateFromProps(props，state)：在组件被重新渲染之前调用，用于根据props更新状态。[替代了componentWillReceiveProps]
  • shouldComponentUpdate： 是否要执行组件更新。如果显示的声明了该钩子，则必须返回一个布尔值，true：执行组件更新；false：不执行组件更新。如果没有显示的声明该钩子，则正常执行组件更新
    • 应用场景： 手动进行性能优化
    • 触发条件：state状态数据发生改变
    • 系统参数：nextProps: 更新后的props； nextState：更新后的state
    • 特点： 还没有完成数据和视图的更新
  • 【已废弃】componentWillUpdate: 即将执行组件更新: *已经被废弃，向下兼容请使用【UNSAFE_componentWillUpdate】
    • 触发条件：state状态数据发生改变
    • 系统参数：nextProps: 更新后的props； nextState：更新后的state
    • 特点： 还没有完成数据和视图的更新
  • render: 重新执行视图编译
    • 触发条件：state状态数据发生改变
    • 特点： 完成数据更新， 但是还没有完成视图更新
  • getSnapshotBeforeUpdate：在组件被重新渲染之前调用，用于获取更新前的DOM状态。[替换componetnWillUpdate]
  • componentDidUpdate：组件更新完成
    • 触发条件：state状态数据发生改变
    • 特点：已经完成数据和视图的更新
    • 系统参数：prevProps： 更新之前的props； prevState：更新之前的state【此时this.state是更新后的state】
    • 场景： 进行DOM操作、网络请求等副作用操作。
  • componentWillReceiveProps：组件接收的外部props属性数据发生改变的时候执行: *已经被废弃，向下兼容请使用【UNSAFE_componentWillReceiveProps】
    • 触发条件：props数据发生改变
    • 特点：已经完成数据和视图的更新
import { Component } from 'react'export default class Home extends Component {state = {title: 'home'}clickUpdate = () => {this.setState({title: '主页'})}UNSAFE_componentWillMount(): void {console.log(this.state.title) // 'title'console.log(document.querySelector('.home_box')) // null}render() {console.log(this.state.title, 'render') // 'title'console.log(document.querySelector('.home_box'), 'render') // nullreturn (<><div className="home_box">{this.state.title}</div><button onClick={this.clickUpdate}>获取DOM</button></>)}componentDidMount(): void {console.log(this.state.title) // 'title'console.log(document.querySelector('.home_box')) // <div class="home_box">home</div>}// 更新阶段shouldComponentUpdate(nextProps: Readonly<{}>,nextState: Readonly<{ title: string }>,nextContext: any): boolean {// nextProps: {}, nextState: 更新后的state, nextContext: {}console.log(nextProps, nextState, nextContext)if (this.state.title === nextState.title) {// 如果数据没有发生变化 则不执行组件更新, 即是不执行render()钩子return false}return true}// componentWillUpdate: 严格模式下eslint, 会报错// UNSAFE_componentWillUpdate: 这个在高版本React也废弃了, 但是在ESLint模式下也可以使用[向下兼容]UNSAFE_componentWillUpdate(nextProps: Readonly<{}>,nextState: Readonly<{}>,nextContext: any): void {console.log(nextProps, nextState, nextContext, 'UNSAFE_componentWillUpdate')}componentDidUpdate(prevProps: Readonly<{}>,prevState: Readonly<{}>,snapshot?: any): void {console.log(prevProps, prevState, snapshot, 'componentDidUpdate')}UNSAFE_componentWillReceiveProps(nextProps: Readonly<{}>,nextContext: any): void {console.log(nextProps, nextContext, 'UNSAFE_componentWillReceiveProps')}
}

3、销毁阶段： 【组件从DOM中移除的过程】

  • componentWillUnmount：组件被移除前调用，可以进行清理操作，如取消定时器、取消订阅等。

4、补充

除了上述方法，还有一些其他的生命周期方法，如错误处理相关的方法（componentDidCatch、getDerivedStateFromError）和静态方法（getDerivedStateFromProps、getDerivedStateFromError）

需要注意的是，React 16.3之后，一些生命周期方法已经被废弃或改名，如componentWillMount、componentWillUpdate、componentWillReceiveProps等，建议使用新的方法来替代

  • 旧版生命周期图

在这里插入图片描述

  • 新版生命周期图
    在这里插入图片描述

二、函数组件的生命周期

React 18引入了一些新的生命周期方法，以便更好地管理组件的生命周期事件

  • useEffect: 【异步执行的，不会阻塞渲染】用于在组件挂载、更新或卸载时执行副作用操作。它可以替代旧的生命周期方法componentDidMount、componentDidUpdate和componentWillUnmount
import { useState, useEffect } from 'react'const Home = () => {const [count, setCount] = useState(0)const add = () => {setCount(count + 1)}// 接收一个参数时：组件加载完成和组件状态更新时 执行useEffect(function () {console.log('zhw')})// 如果只希望函数挂载完后，执行一次，组件状态变化不再执行，可以传空数组useEffect(function () {console.log('zhw')}, [])// 接收参数二时，参数二是一个数组，用于指定依赖数据，用于当依赖数据变化时，执行一次回调// 1、组件挂载完后执行一次；2、仅仅当count的状态更新，执行一次useEffect(function () {console.log('zhw')}, [count])// 组件卸载之前按// 1、useEffect(function () {return function () {// 该子函数会在组件    即将卸载  和   状态更新 的时候，自动执行console.log('组件卸载了')}})  // 2、useEffect(function () {return function () {// 该子函数会在组件    仅仅在 即将卸载  的时候，自动执行console.log('组件卸载了')}}, []) return (<><span>{count}</span><button onClick={add}>+</button></>)
}
export default Home
  • useLayoutEffect: 在DOM更新之后同步执行[阻塞渲染]，以确保在浏览器绘制之前执行副作用操作。

适用于需要在浏览器执行绘制和布局之前立即执行的副作用操作。

import { useLayoutEffect, useState } from 'react'const Home = () => {const [count, setCount] = useState(0)const add = () => {setCount(count + 1)}useLayoutEffect(function () {console.log('useLayoutEffect')},[count])return (<><span>{count}</span><button onClick={add}>+</button></>)
}
export default Home

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

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

相关文章

不同路径 II

不同路径 II

一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finish”&#xff09;。 现在考虑网格中有障碍物。那么从左上角到右下角…
阅读更多...
LBERT论文详解

LBERT论文详解

论文地址&#xff1a;https://arxiv.org/abs/2105.07148 代码地址&#xff1a;https://github.com/liuwei1206/LEBERT 模型创新 LEBRT采用句子中的词语对&#xff08;论文中称为Char-Word Pair&#xff09;的特征作为输入作者设计Lexicon adapter&#xff0c;在BERT的中间某一…
阅读更多...
图形编辑器开发：是否要像 Figma 一样上 wasm

图形编辑器开发：是否要像 Figma 一样上 wasm

大家好&#xff0c;我是前端西瓜哥。 wasm 拿来做 Web 端的图形编辑器貌似是不错的选择。 因为图形处理会有相当多无法利用到 WebGL GPU 加速的 CPU 密集的计算。比如对一条复杂贝塞尔曲线进行三角化&#xff0c;对多个图形进行复杂图形的布尔运算。 图形编辑器性能天花板 F…
阅读更多...
从娱乐产品到效率工具，ARknovv首款AR眼镜回归“AR本质”

从娱乐产品到效率工具，ARknovv首款AR眼镜回归“AR本质”

如果说2022年是AR的元年&#xff0c;2023年则有望成为消费级AR眼镜的新拐点。 今年AR眼镜行业发展明显加快&#xff0c;且不断有大厂入局&#xff1a;今年2月小米发布无线AR眼镜探索版&#xff1b;3月荣耀也推出了一款全新的观影眼镜&#xff1b;而苹果在6月发布的MR头显Visio…
阅读更多...
【计算机视觉中的 GAN 】 - 生成学习简介（1）

【计算机视觉中的 GAN 】 - 生成学习简介（1）

一、说明 在阅读本文之前&#xff0c;强烈建议先阅读预备知识&#xff0c;否则缺乏必要的推理基础。本文是相同理论GAN原理的具体化范例&#xff0c;阅读后有两个好处&#xff1a;1 巩固了已经建立的GAN基本概念 2 对具体应用的过程和套路进行常识学习&#xff0c;这种练习题一…
阅读更多...
transformer理解

transformer理解

transformer的理解 Q、K、V的理解 核心是自注意力机制。即每个位置的结果为所有位置的加权平均和。为了得到每个位置的权重，需要Q*K得到。 整个多头的self-attention过程 单个encoder encoder-decoder encoder中的K和V会传到decoder中的encoder-decoder attention中。 …
阅读更多...
IOS + Appium自动化教程

IOS + Appium自动化教程

前言 项目闲置下来了&#xff0c;终于抽空有时间搞自动化了&#xff0c;看了下网上的教程基本通篇都是android自动化的介绍 &#xff0c;ios自动化方面的内容网上简介的少之可怜。由于本人对ios自动化也是第一次做&#xff0c;甚至对苹果电脑的使用都不太熟悉&#xff0c;花了大…
阅读更多...
Android kotlin系列讲解之最佳的UI体验 - Material Design 实战

Android kotlin系列讲解之最佳的UI体验 - Material Design 实战

目录 一、什么是Material Design二、Toolbar三、滑动菜单1、DrawerLayout2、NavigationView 四、悬浮按钮和可交互提示1、FloatingActionButton2、Snackbar3、CoordinatorLayout 五、卡片式布局1、MaterialCardView2、AppBarLayout 六、可折叠式标题栏1、CollapsingToolbarLayo…
阅读更多...
linux驱动开发入门（学习记录）

linux驱动开发入门（学习记录）

2023.7.6及7.7 概述了解 一 1.驱动框架 2. 字符设备 块设备&#xff0c;存储相关 网络设备驱动 不一定属于某一种类型二 1.获取外设或传感器数据&#xff0c;控制外设&#xff0c;数据会提交给应用程序 2.编写一个驱动&#xff0c;及测试应用程序 app。驱动和应用完全分开 3.驱…
阅读更多...
OpenCV：图像直方图计算

OpenCV：图像直方图计算

图像直方图为图像中像素强度的分布提供了有价值的见解。通过了解直方图&#xff0c;你可以获得有关图像对比度、亮度和整体色调分布的信息。这些知识对于图像增强、图像分割和特征提取等任务非常有用。 本文旨在为学习如何使用 OpenCV 执行图像直方图计算提供清晰且全面的指南。…
阅读更多...
高清视频制作GIF怎么操作？一个工具在线完成视频转GIF

高清视频制作GIF怎么操作？一个工具在线完成视频转GIF

一段视频为了方便传输分享想要做成GIF动画的时候要怎么操作呢&#xff1f;很简单&#xff0c;只需要一款专业的GIF在线制作工具-GIF中文网&#xff0c;使用视频转GIF&#xff08;https://www.gif.cn/&#xff09;功能&#xff0c;上新MP4格式视频&#xff0c;能够快速制作1分钟…
阅读更多...
Django学习笔记-视图（views）的使用

Django学习笔记-视图（views）的使用

Django中可以使用views进行管理&#xff0c;类似于WPF的MVVM的ViewModel层&#xff0c;也相当于MVC架构的模Controller层。 一、基于函数的视图FBV&#xff08;Function-Based View&#xff09; 通过定义一个函数&#xff0c;包含HttpRequest对象作为参数&#xff0c;用来接受…
阅读更多...
如何提高自己的软件测试水平之bug定位

如何提高自己的软件测试水平之bug定位

同学们在面试投简历的时候会经常看到人家公司JD上写的要求之一&#xff0c;如下&#xff1a; 这句话大家不要以为随便写写的&#xff0c;在我工作的十几年过程中起码见过10个以上试用期没过的公司新人&#xff0c;公司在衡量一个测试工程师是否专业的标准之一就是&#xff1a;…
阅读更多...
Linux下在终端输入密码隐藏方法

Linux下在终端输入密码隐藏方法

Linux系统中&#xff0c;如何将在终端输入密码时将密码隐藏&#xff1f; 最近做简单的登录界面时&#xff0c;不做任何操作的话&#xff0c;在终端输入密码的同时也会显示输入的密码是什么&#xff0c;这样对于隐蔽性和使用都有不好的体验。那么我就想到将密码用字符*隐藏起来…
阅读更多...
freeswitch的mod_xml_curl模块

freeswitch的mod_xml_curl模块

概述 freeswitch是一款简单好用的VOIP开源软交换平台。 随着fs服务的增多&#xff0c;每一台fs都需要在后台单独配置&#xff0c;耗时耗力&#xff0c;心力憔悴。 如果有一个集中管理配置的配置中心&#xff0c;统一管理所有fs的配置&#xff0c;并可以实现动态的修改配置就…
阅读更多...
mybatis日志工厂

mybatis日志工厂

前言&#xff1a; 如果一个数据库操作&#xff0c;出现异常&#xff0c;我们需要排错&#xff0c;日志就是最好的助手 官方给我们提供了logImpl&#xff1a;指定 MyBatis 所用日志的具体实现&#xff0c;未指定时将自动查找。 默认工厂&#xff1a; 在配置文件里添加&#xf…
阅读更多...
深度剖析APP开发中的UI/UX设计

深度剖析APP开发中的UI/UX设计

作为一个 UI/UX设计师&#xff0c;除了要关注 UI/UX设计之外&#xff0c;还要掌握移动开发知识&#xff0c;同时在日常工作中也需要对用户体验有一定的认知&#xff0c;在本次分享中&#xff0c;笔者就针对自己在工作中积累的一些经验来进行一个总结&#xff0c;希望能够帮助到…
阅读更多...
如何连接远程服务器？快解析内内网穿透可以吗？

如何连接远程服务器？快解析内内网穿透可以吗？

如今我们迎来了数字化转型的时代&#xff0c;众多企业来为了更好地推动业务的发展&#xff0c;常常需要在公司内部搭建一个远程服务器。然而&#xff0c;对于企业员工来说&#xff0c;在工作过程中经常需要与这个服务器进行互动&#xff0c;而服务器位于公司的局域网中&#xf…
阅读更多...
简述IO(BIO NIO IO多路复用)

简述IO(BIO NIO IO多路复用)

在unix网络变成中的五种IO模型: Blocking IO(阻塞IO) NoneBlocking IO (非阻塞IO) IO mulitplexing(IO多路复用) signal driven IO (信号驱动IO) asynchronous IO (异步IO) BIO BIO&#xff08;Blocking IO&#xff09;是一种阻塞IO模型&#xff0c;也是传统的IO操作模型之一…
阅读更多...
RocketMQ概论

RocketMQ概论

目录 前言&#xff1a; 1.概述 2.下载安装、集群搭建 3.消息模型 4.如何保证吞吐量 4.1.消息存储 4.1.1顺序读写 4.1.2.异步刷盘 4.1.3.零拷贝 4.2.网络传输 前言&#xff1a; RocketMQ的代码示例在安装目录下有全套详细demo&#xff0c;所以本文不侧重于讲API这种死…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023