【react】生命周期(旧)

2023-10-27

生命周期的三个阶段:

  1. 初始化阶段:由ReactDOM.render()触发——初次渲染
  • constructor() 构造器
  • componentWillMount() 组件将要挂载
  • render() 初始化渲染和状态更新之后调用,调1+n次
  • componentDidMount() 常用 组件挂载完毕之后调用,只调一次 render的兄弟
    一般在这个钩子中做一些初始化的事:开启定时器、发送网络请求、订阅消息
  1. 更新阶段:由组件内部this.setState()或父组件重新render触发
  • shouldComponentUpdate() 控制组件更新的"阀门" 返回false时,页面就不会更新了,后面的生命周期也不会再执行
  • componentWillUpdate() 组件将要更新的钩子
  • render() 必须用的一个
  • componentDidUpdate() 组件更新完毕的钩子
  1. 卸载组件:由ReactDOM.unmountComponentAtNode()触发
  • componentWillUnmount() 常用
    一般在这个钩子中做一些收尾的事:关闭定时器、取消订阅消息

(以上是官方版本)
以下是我自己总结的,更详细点:

进入页面后生命周期的执行顺序
constructor 构造器

componengtWillMount 组件将要挂载

render 初始化渲染和状态更新之后调用,调1+n次

componentDidMount 组件挂载完毕之后调用,只调一次 render的兄弟

componentWillUnmount 组件将要卸载 可以用来清除定时器

以下是走setState之后的生命周期执行顺序
执行setState

shouldComponentUpdate 控制组件更新的"阀门" 返回false时,页面就不会更新了,后面的生命周期也不会再执行

componentWillUpdate 组件将要更新的钩子

render

componentDidUpdate 组件更新完毕的钩子

componentWillUnmount 组件将要卸载

以下是forceUpdate —— 不更改任何状态中的数据,强制更新的生命周期的执行顺序
执行forceUpdate

componentWillUpdate 组件将要更新的钩子

render

componentDidUpdate 组件更新完毕的钩子

父组件给子组件传值时生命周期的执行顺序
父组件的render

子组件的componentWillReceiveProps 但是第一次传值不会走这个生命周期,第二次传才会走

子组件的shouldComponentUpdata

子组件的componentWillUpdate

子组件的render

子组件的componentDidUpdate

其他生命周期
ReactDom.unmountComponentAtNode 卸载组件

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【react】生命周期(旧) 的相关文章

随机推荐

  • 【剑指Offer40】最小的k个数

    题目描述 2021 3 22 输入整数数组 arr 找出其中最小的 k 个数 例如 输入4 5 1 6 2 7 3 8这8个数字 则最小的4个数字是1 2 3 4 示例1 输入 arr 3 2 1 k 2 输出 1 2 或者 2 1 示例2
  • [ IntelliJ IDEA Java开发配置 : 不断完善中]

    推荐在看本文之前先阅读IntelliJ IDEA 官方文档 https www jetbrains com help idea install and set up intellij idea html 1 IDEA版本选择 版本选择 20
  • 服务器命令行常用的指令

    1 进入服务器 ssh p XXXXX 端口号 XXX 202 119 84 91 用户名 IP地址 2 查看当前所在路径里包含的文件 ls 3 查询绝对路径 pwd 4 编辑一个python文件 1 打开文件 vim demo py 2
  • 使用R语言中的scale_size函数调整数据点的大小范围

    使用R语言中的scale size函数调整数据点的大小范围 在R语言中 我们经常需要对数据进行可视化 其中包括调整数据点的大小以传达更多信息 scale size函数是一个非常有用的函数 可以帮助我们调整数据点的大小的度量范围 本文将介绍如
  • 跟hoowa学做智能路由(五):熟悉OpenWRT

    题记 呦呦鹿鸣 食野之苹 我有嘉宾 鼓瑟吹笙 从本章开始 我们要更多的了解系统的特性 以及不论是智能路由还是智能家居 我们用路由器的处理器到底能做多少事情 系统结构 在上一章我们已经完成了刷机工作 这个时候系统进行了首次启动 并且格式化了它
  • 基于“机器学习”的智能聊天机器人---python实现(1)

    本博文以自己课程设计为依托 介绍如何利用python语言编程实现基于 机器学习 的智能聊天机器人 由于本项目是自己首次接触python以及利用计算机编程实现小型项目 中途遇到诸多问题 自己也在其中收获很多 故想写一篇博文记录一下自己课程设计
  • H3C 查看设备路由表

    转载于 https www cnblogs com fanweisheng p 11156750 html
  • 毕业设计-基于深度学习的视觉多目标跟踪

    目录 前言 课题背景和意义 实现技术思路 一 基于深度学习的视觉多目标跟踪 二 基于深度学习的DBT算法 三 基于深度学习的JDT算法 实现效果图样例 最后 前言 大四是整个大学期间最忙碌的时光 一边要忙着备考或实习为毕业后面临的就业升学做
  • mysql快速导入sql文件_MySQL高效导入多个.sql文件方法详解

    MySQL有多种方法导入多个 sql文件 里面是sql语句 常用的有两个命令 mysql和source 但是这两个命令的导入效率差别很大 具体请看最后的比较 还有sqlimport和LOAD DATA INFILE等导入方法 不过它们主要用
  • FreeRTOS学习---“信号量”篇

    总目录 FreeRTOS学习 任务 篇 FreeRTOS学习 消息队列 篇 FreeRTOS学习 信号量 篇 FreeRTOS学习 事件组 篇 FreeRTOS学习 定时器 篇 在 消息队列 篇中 我们曾经埋下一个伏笔 就是说 FreeRT
  • CMSIS-RTOS 信号量

    信号量Semaphores 和信号类似 信号量也是一种同步多个线程的方式 简单来讲 信号量就是装有一些令牌的容器 当一个线程在执行过程中 就可能遇到一个系统调用来获取信号量令牌 如果这个信号量包含多个令牌 线程就会继续执行 同时信号量令牌的
  • 使用 sklearn 进行数学建模的通用模板

    前言 无论是本科和研究生都会有的数学建模含金量还是很高的 下面将介绍一下进行数学建模的一些基本操作方法 这里主要是利用sklearn 进行建模 包括前期的一些数据预处理以及一些常用的机器学习模型以及一些简单粗暴的通用建模步骤 仅代表我自己意
  • 用背景渐变的透明度设置不同颜色的背景渐变

    项目最近这几天正在做不同主题的颜色配置方案 要根据用户输入的颜色来配置整个主题的颜色 让人头疼的是 其中一个主题所有的列表头部背景色都是2到3组渐变值的线性渐变 也就是说 要根据用户输入的颜色值生成不同的但相似度很近的渐变颜色 我上网查了些
  • mysql中explain用法和结果的含义

    explain select from user explain extended select from user id SELECT识别符 这是SELECT的查询序列号 select type SELECT类型 可以为以下任何一种 SI
  • 【ML】使DBSCAN 变得简单 & 如何使用 Scikit-Learn 进行 Python 教程

    大家好 我是Sonhhxg 柒 希望你看完之后 能对你有所帮助 不足请指正 共同学习交流 个人主页 Sonhhxg 柒的博客 CSDN博客 欢迎各位 点赞 收藏 留言 系列专栏 机器学习 ML 自然语言处理 NLP 深度学习 DL fore
  • [架构之路-180]-《软考-系统分析师》-19- 系统可靠性分析与设计 -2- 容错最重要的技术手段:冗余技术

    目录 1 9 3 冗余技术 19 3 1冗余技术的分类 1 结构冗余 硬件冗余 2 信息冗余 数据冗余 3 时间冗余 4 冗余附加 19 3 2 冗余系统与其工作原理 1 9 3 冗余技术 提高系统可靠性的技术可以分为避错 排错 技术和容错
  • ev3 c语言高级编程,EV3运行原生C语言程序实例

    EV3运行原生C语言程序实例 本帖最后由 ntwuhui 于 2013 9 20 07 58 编辑 说明 以下过程直接在EV3系统上编译原生C语言程序 不需要修改固件 Ununtu13 04测试通过 个人觉得此法应该也可以在其他Linux系
  • Python subprocess模块

    Python subprocess模块 从Python 2 4开始 Python引入subprocess模块来管理子进程 以取代一些旧模块的方法 如 os system os spawn os popen popen2 commands 不
  • 高并发解决方案

    解决高并发方案 背景 在今天 基于SOA的架构已经大行其道 伴随着架构的SOA化 相关联的服务熔断 降级 限流等思想 也在各种技术讲座中频繁出现 本文将结合Netflix开源的Hystrix框架 对这些思想做一个梳理 伴随着业务复杂性的提高
  • 【react】生命周期(旧)

    生命周期的三个阶段 初始化阶段 由ReactDOM render 触发 初次渲染 constructor 构造器 componentWillMount 组件将要挂载 render 初始化渲染和状态更新之后调用 调1 n次 component