React学习笔记（四）——React 组件生命周期

news2024/10/1 12:26:03

目录

1. 生命周期-概览

2. 生命周期-挂载阶段

3. 生命周期-更新阶段

4. 生命周期-卸载阶段

5. setState扩展-发现问题

6. setState扩展-更多用法

 7. setState扩展-异步

1. 生命周期-概览

了解react类组件生命周期整体情况

大致步骤：

  • 什么是生命周期
  • React类组件的生命周期整体概览
  • 了解生命周期的意义

具体内容：

① 什么是组件生命周期

  • 一个事物从创建到最后消亡经历的整个过程

② React类组件的生命周期整体概览，组件从创建到消耗的过程

React组件生命周期

③ 了解生命周期的意义

  • 助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因
  • 钩子函数为开发人员在不同阶段操作组件提供了时机

总结：

  • 只有类组件才有生命周期，分为 挂载阶段 更新阶段 卸载阶段

2. 生命周期-挂载阶段

够说出组件的挂载阶段的钩子函数以及执行时机

大致步骤：

  • 知道挂载阶段会执行那些函数，执行顺序
  • 知道每个函数内一般可以做什么事
  • 参考代码

具体内容：

① 知道挂载阶段会执行那些函数，执行顺序

② 知道每个函数内一般可以做什么事

钩子 函数触发时机作用
constructor创建组件时，最先执行1. 初始化state 2. 创建 Ref 3. 使用 bind 解决 this 指向问题等
render每次组件渲染都会触发渲染UI（注意： 不能调用setState() ）
componentDidMount组件挂载（完成DOM渲染）后1. 发送网络请求 2.DOM操作

③ 参考代码

import { Component } from 'react'

export default class App extends Component {
  constructor () {
    super()
    console.log('1. constructor执行')
  }
  componentDidMount () {
    console.log('3. componentDidMount执行')
  }
  render() {
    console.log('2. render执行')
    return <div>App组件</div>
  }
}

总结：

  • 组件挂载阶段，顺序执行 constructor render componentDidMount 三个函数

3. 生命周期-更新阶段

能够说出组件的更新阶段的钩子函数以及执行时机

大致步骤：

  • 知道更新阶段会执行那些函数，执行顺序
  • 知道何时触发更新阶段
  • 知道触发的钩子函数里可以做些什么
  • 参考代码

具体内容：

① 更新阶段会执行那些函数，执行顺序

② 何时触发更新阶段

  • setState()
  • forceUpdate() 强制组件更新
  • 组件接收到新的props（实际上，只需要父组件更新，子组件就会重新渲染）

③ 钩子函数里可以做什么

钩子函数触发时机作用
render每次组件渲染都会触发渲染UI（与 挂载阶段 是同一个render）
componentDidUpdate组件更新（完成DOM渲染）后DOM操作，可以获取到更新后的DOM内容，不要直接调用setState

④ 参考代码

import { Component } from 'react'

class Child extends Component {
  render() {
    return <h1>统计豆豆被打的次数：</h1>
  }
}

export default class App extends Component {
  state = {
    count: 0
  }
	
	handleClick = () => {
    this.setState({
      count: this.state.count + 1
    })
  }

  componentDidUpdate() {
    console.log('2. componentDidUpdate执行')
  }

  render() {
    console.log('1. render执行')
    return (
      <div>
        <Child />
        <button onClick={this.handleClick}>打豆豆</button>
      </div>
    )
  }
}

总结：

  • 组件更新会触发 componentDidUpdate 钩子函数

4. 生命周期-卸载阶段

能够说出组件的销毁阶段的钩子函数以及执行时机

大致步骤：

  • 什么时候触发卸载
  • 卸载阶段执行那些钩子函数，一般做什么事情
  • 参考代码
  • 演示清理工作

具体内容：

① 什么时候触发卸载？

  • 在组件被移除的时候（消失）触发卸载阶段

② 卸载阶段执行那些钩子函数，一般做什么事情

钩子函数触发时机作用
componentWillUnmount组件卸载（从页面中消失）执行清理工作（比如：清理定时器等）

③ 参考代码

import { Component } from 'react'

class Child extends Component {
  componentWillUnmount () {
    console.log('componentWillUnmount执行')
  }
  render() {
    return <h1>统计豆豆被打的次数：{this.props.count}</h1>
  }
}

export default class App extends Component {
  state = {
    count: 0
  }
	
	handleClick = () => {
    this.setState({
      count: this.state.count + 1
    })
  }

  render() {
    return (
      <div>
        { this.state.count < 5 && <Child count={this.state.count} />}
        <button onClick={this.handleClick}>打豆豆</button>
      </div>
    )
  }
}

总结：

  • 组件卸载阶段执行 componentWillUnmount, 可以清理全局事件、定时器等。

5. setState扩展-发现问题

发现setState是“异步”的，多次setState会合并。

大致步骤：

  • 理解setState是“异步”的，理解setState会合并更新
  • React这么处理的好处是什么？

具体内容：

  1. 理解setState是“异步”的，理解setState会合并更新
    • 调用 setState 时，将要更新的状态对象，放到一个更新队列中暂存起来（没有立即更新）
    • 如果多次调用 setState 更新状态，状态会进行合并，后面覆盖前面
    • 等到所有的操作都执行完毕，React 会拿到最终的状态，然后触发组件更新
  2. React这么处理的好处是什么？
    • “异步” 更新，或者做延时更新，为了等所有操作结束后去更新
    • 合并更新，是将多次setState合并，然后进行更新
    • 都是为了提高渲染性能
import React, {Component} from 'react' 
export default class Demo extends Component {
  state = {
    count: 0
  }
  handleClick = () => {
    this.setState({count: this.state.count+100})
    this.setState({count: this.state.count+1})
    console.log(this.state.count)  // 打印0
  }
  render() {
    console.log('render')
    return (
      <div>
        <div>Demo组件：{this.state.count}</div>
        <button onClick={this.handleClick}>体现“异步”和合并</button> 
      </div>
    )
  }
}

总结：

  • setState函数具有 “异步” 和 合并 的特点，目的为了提高渲染性能。

6. setState扩展-更多用法

掌握setState的更多用法，让数据串联更新，等待数据页面更新。

大致步骤：

  • 多次使用setState让数据串联使用的写法
  • 调用setState后页面更新后执行逻辑写法

具体内容：

① 多次使用setState让数据串联使用的写法

import React, {Component} from 'react' 
export default class Demo extends Component {
  state = {
    count: 0
  }
  handleClick = () => {
    // this.setState({count: this.state.count+1})
    // this.setState({count: this.state.count+1})
    // this.setState({count: this.state.count+1})
    // 页面展示 1
    this.setState(prevState=>{
      return {
        count: prevState.count + 1
      }
    })
    this.setState(prevState=>{
      return {
        count: prevState.count + 1
      }
    })
    this.setState(prevState=>{
      return {
        count: prevState.count + 1
      }
    })
    // 页面展示 3
  }
  render() {
    return (
      <div>
        <div>Demo组件：{this.state.count}</div>
        <button onClick={this.handleClick}>setState串联更新数据</button> 
      </div>
    )
  }
}

② 调用setState后页面更新后执行逻辑写法

import React, {Component} from 'react' 
export default class Demo extends Component {
  state = {
    count: 0
  }
  handleClick = () => {
    this.setState(prevState=>{
      return {
        count: prevState.count + 1
      }
    },()=>{
       console.log('更新后：', this.state.count)  // 打印：1
    })
    console.log('未更新：', this.state.count)  // 打印：0
  }
  render() {
    return (
      <div>
        <div>Demo组件：{this.state.count}</div>
        <button onClick={this.handleClick}>setState更新后执行逻辑</button> 
      </div>
    )
  }
}

总结：

  • 使用 setState((prevState) => {}) 语法，可以解决多次调用状态依赖问题
  • 使用 setState(updater[, callback]) 语法，在状态更新（页面完成重新渲染）后立即执行某个操作

 7. setState扩展-异步

能够说出setState到底是同步的还是异步

大致步骤：

  • 了解为啥会出现“异步”现象

具体内容：

  • setState本身并不是一个异步方法，其之所以会表现出一种“异步”的形式，是因为react框架本身的一个性能优化机制
  • React会将多个setState的调用合并为一个来执行，也就是说，当执行setState的时候，state中的数据并不会马上更新
import React, { Component } from 'react';
import ReactDOM from 'react-dom'

class App extends Component {
  state = {
    count: 0,
    monney: 10
  }
  render() { 
    return (
      <div>
        <h1>我是app根组件------------{ this.state.count }---------{ this.state.monney}</h1>
        <button onClick={this.addCount}> + 1</button>
      </div>
    )
  }
  addCount = () => {
    this.setState({
      count: this.state.count + 1
    })
    this.setState({
      count: this.state.count + 1
    })
    this.setState({
      monney: this.state.monney + 11
    })
    this.setState({
      count: this.state.count + 2
    })
    // 多次调用了 setState 方法， 相当于只执行了一次
    // this.setState({
    //   count: this.state.count + 2,
    //   monney: this.state.monney + 11
    // })
    console.log(this.state.count)
  }
}

ReactDOM.render(<App></App>, document.querySelector('#root'))

总结：

  • 在react类组件中，多次的setState并不会立刻执行，而是合并成一个来执行。

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

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

相关文章

AntFlow-Vue3 ：一个仿钉钉流程审批，且满足99.8%以上审批流程需求的企业级工作流平台，开源且免费！

AntFlow-Vue3 ：一个仿钉钉流程审批，且满足99.8%以上审批流程需求的企业级工作流平台，开源且免费！

在现代企业管理中&#xff0c;流程审批的高效性直接影响到工作的流畅度与生产力。最近&#xff0c;我发现了一个非常有趣的项目—— AntFlow-Vue3 。这个项目不仅提供了一个灵活且可定制的工作流平台&#xff0c;还能让用户以可视化的方式创建和管理审批流程。 如果你是一名前…
阅读更多...
10. 排序

10. 排序

一、排序的概念及引用 1. 排序的概念 排序&#xff1a;所谓排序&#xff0c;就是使一串记录&#xff0c;按照其中的某个或某些关键字的大小&#xff0c;递增或递减的排列起来的操作。 稳定性&#xff1a;假定在待排序的记录序列中&#xff0c;存在多个具有相同的关键字的记录…
阅读更多...
Qt基础之四十七：管理员权限

Qt基础之四十七：管理员权限

在Windows系统中，以管理员身份运行的意思是，用系统管理最高权限运行程序。一般来说，只有当某些操作涉及系统保护区域时，才会需要用户授权管理员运行。如此一来，程序、命令在运行过程中，就有了足够权限，更改系统设置或注册表。 一.Qt程序加入管理员权限的几种方式 1.MS…
阅读更多...
推荐一些免费下载恶意样本的网站

推荐一些免费下载恶意样本的网站

前一阵微步下载样本开始收费&#xff0c;算是又断了一个很好的白嫖途径。目前工作需求是不定期获取一批不同家族样本&#xff0c;看了看微步基础会员每天5次的下载限制&#xff0c;我默默把微步网页点了X&#xff0c;选择其他网站进行白嫖。 精确搜索 先列举出几个搜索比较简单…
阅读更多...
【每天学个新注解】Day 6 Lombok注解简解（五）—@SneakyThrows

【每天学个新注解】Day 6 Lombok注解简解（五）—@SneakyThrows

SneakyThrows 简化异常处理 并不建议日常开发中通过此注解解决异常捕获问题&#xff01;&#xff01;&#xff01; 允许方法抛出检查型异常而无需显式声明或捕获这些异常。这对于那些不希望在方法签名中声明异常或不愿意编写复杂的 try-catch 块的场景非常有用。 使用 SneakyT…
阅读更多...
vue绘制评论页面

vue绘制评论页面

<template><div><div class"conmment_box"><div class"my-reply"><div class"reply-info"><el-inputfocus"focusInput"type"textarea"placeholder"请输入内容"v-model"tex…
阅读更多...
LaTeX 编辑器-TeXstudio

LaTeX 编辑器-TeXstudio

TeXstudio 是一款开源跨平台 LaTeX 编辑软件&#xff0c;界面与 Texmaker 类似。TeXstudio 为用户提供互动式拼写检查、代码折叠、语法高亮、代码提示和自动完成等特性&#xff0c;功能丰富&#xff0c;界面美观&#xff0c;但软件本身不提供底层功能&#xff0c;需要使用者自行…
阅读更多...
Qualcomm AI Hub模型优化1: Whisper-Base-En导出及问题解决

Qualcomm AI Hub模型优化1: Whisper-Base-En导出及问题解决

1 从Qualcomm AI Hub Module中选择Whisper-Base-En模块部署 1.1 进入module虚拟环境 python3 -m venv qai_hub_models_env && source qai_hub_models_env/bin/activate1.2 使用pip安装高通音频转录包 pip install "qai_hub_models[whisper_base_en]" 1.3…
阅读更多...
C语言 | Leetcode C语言题解之第436题寻找右区间

C语言 | Leetcode C语言题解之第436题寻找右区间

题目&#xff1a; 题解&#xff1a; typedef struct {int start;int index; } Node;int cmp(const void *pa, const void *pb) {return ((Node *)pa)->start - ((Node *)pb)->start; }int* findRightInterval(int** intervals, int intervalsSize, int* intervalsColSiz…
阅读更多...
网站建设中，JavaScript为什么现在可以做后台了？

网站建设中，JavaScript为什么现在可以做后台了？

JavaScript&#xff0c;作为一种最初为浏览器端脚本设计的语言&#xff0c;已经逐渐发展成为可以在服务器端运行的强大工具。以下是JavaScript可以做后台开发的原因分析&#xff1a; Node.js的崛起 事件驱动与非阻塞I/O&#xff1a;Node.js的事件驱动和非阻塞I/O模型使得JavaSc…
阅读更多...
uniapp实现展示1个或多个文字标签，可点击切换选中、不选中的状态

uniapp实现展示1个或多个文字标签，可点击切换选中、不选中的状态

前言 uni-tag是uni-app框架提供的一个标签组件&#xff0c;用于展示标签或者标记某个元素。它可以在视图中用来显示一组标签&#xff0c;并且支持自定义样式和事件。 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 uni-notice-bar组件具有以下特点&…
阅读更多...
利用千帆SDK实现作文自动批改

利用千帆SDK实现作文自动批改

目录 作文批改实操 0. 环境准备 1. 大模型推理调用 1.1 Prompt 初探&#xff08;尝试到优化&#xff09; 1.2 Prompt 自动优化迭代&#xff08;APO&#xff1a;Automatic Prompt Optimization&#xff09; 1.3 推理超参优化&#xff08;autotuner&#xff09; 1.3.1 准备…
阅读更多...
MATLAB案例 | 基于Copula的可靠度分析

MATLAB案例 | 基于Copula的可靠度分析

本文详细介绍了Copula函数的绘制及在可靠度分析中的应用 各种类型Copula函数绘图完整代码例题1完整代码例题2完整代码各种类型Copula函数绘图 完整代码 clear clcy_gaussian = copularnd(gaussian, 0.9, 1000); y_t = copularnd(t, 0.91, 17.53,1000); y_Gumbel = copularnd(G…
阅读更多...
【Java网络编程】使用Tcp和Udp实现一个小型的回声客户端服务器程序

【Java网络编程】使用Tcp和Udp实现一个小型的回声客户端服务器程序

网络编程的概念 Java中的网络编程是指使用Java语言及其库创建和管理网络应用程序的过程。这一过程使得不同的计算机可以通过网络进行通信和数据交换。Java提供了一系列强大的API&#xff08;应用程序编程接口&#xff09;来支持网络编程&#xff0c;主要涉及以下几个概念&…
阅读更多...
AtCoder Beginner Contest 372

AtCoder Beginner Contest 372

A - delete . 题目&#xff1a; 代码&#xff1a; #include <bits/stdc.h>using namespace std;typedef long long LL;int main() {string s;cin>>s;for(auto &x: s){if(x!.) cout<<x;}return 0; } B - 3^A 题目&#xff1a; 思路&#xff1a; 预处…
阅读更多...
基于Node.js+Express+MySQL+VUE新闻网站管理系统的设计与实现

基于Node.js+Express+MySQL+VUE新闻网站管理系统的设计与实现

1. 引言 随着互联网技术的发展&#xff0c;人们获取信息的方式发生了巨大的变化。传统的新闻媒体逐渐向数字化、智能化方向发展。新闻推荐网站管理系统能够帮助新闻网站更好地管理和推荐新闻内容&#xff0c;提高用户体验。本文将详细介绍一个新闻推荐网站管理系统的整体设计与…
阅读更多...
【C++】继承（下）

【C++】继承（下）

个人主页~ 继承&#xff08;上&#xff09;~ 继承 四、派生类的默认成员函数五、继承与友元六、继承与静态成员七、复杂的菱形继承以及菱形虚拟继承1、菱形继承2、菱形虚拟继承 八、继承的总结与反思继承和组合 四、派生类的默认成员函数 派生类的构造函数必须调用基类的构造…
阅读更多...
（学习记录）使用HAL库 STM32CubeMX——spi（DMA）配置OLED

（学习记录）使用HAL库 STM32CubeMX——spi（DMA）配置OLED

&#xff08;学习总结&#xff09;STM32CubeMX HAL库教程 学习笔记撰写心得 &#xff08;学习总结&#xff09;STM32CubeMX HAL库教程 学习笔记撰写心得https://blog.csdn.net/Wang2869902214/article/details/142435481 使用HAL库 STM32CubeMX——spi配置 使用硬件spi驱动7针…
阅读更多...
element 输入框文字＋对应签进行长度 和 的判断

element 输入框文字＋对应签进行长度 和 的判断

输入文字长度 指定标签的长度 &#xff08;判断长度并提示&#xff09; <div style"position: relative;" classchangyongyu><el-input type"textarea" :autosize"{ minRows: 8, maxRows: 8 }" style"margin-bottom:10px;"…
阅读更多...
【React】useEffect

【React】useEffect

1. 基本介绍 概念 语法 副作用函数依赖项数组&#xff08;空数组时&#xff0c;只会在组件渲染完毕后执行一次副作用函数&#xff09; 2. 使用 import { useEffect, useState } from reactfunction App() {const [value, setValue] useState(0)useEffect(() > {console…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023