当前位置: 首页 > news >正文

学习React(四)

学习React(四)

    • componentWillMount(被放弃使用)
    • render
    • componentDidMount
    • shouldComponentUpdate(nextProps,nextState)
    • componentWillUpdate(被放弃使用)
    • componentDidUpdate
    • componentWillReceiveProps(被放弃使用)
    • componentWillUnmount
    • react运行的生命周期

在这里插入图片描述

componentWillMount(被放弃使用)

组件被挂载(渲染)到页面之前,自动执行,此时render函数,还没有执行,无法在这一步操作真实DOM

render

挂载(渲染)页面,把虚拟DOM转换成真实DOM,即定义的变量以及jsx被执行

componentDidMount

组件被挂载(渲染)到页面之后,自动执行,此时render函数,已经执行完成,可以在这一步进行DOM节点的操作

shouldComponentUpdate(nextProps,nextState)

组件被更新之前(即每次改变state,props的值都会执行该函数),自动执行,它会返回true或者false,返回true就继续执行componentWillUpdate,否则就不执行,
可以通过nextProps.[属性值]与当前this.props.[属性值]比较是否一样,来选择return true还是return false,来执行组件中的render函数

componentWillUpdate(被放弃使用)

执行在shouldComponentUpdate之后,shouldComponentUpdate返回值为true,才执行componentWillUpdate,接着继续执行render函数重新渲染页面,当页面渲染完成后执行componentDidUpdate

componentDidUpdate

组件更新完成之后,自动执行

componentWillReceiveProps(被放弃使用)

该函数要执行的条件:
1.首先它要从父组件接受参数;
2.这个组件要已经在父组件中渲染过一次,才会执行,如果这个组件是第一次存在于父组件中,就不会执行

componentWillUnmount

组件被删除之前,自动执行

react运行的生命周期

1.Initialization(初始化):初始化页面在构造函数中获取props值,以及state值的设置,页面创建过程中只执行一次2.Mounting(挂载):设置好props和state的值之后,开始挂载(渲染)页面,页面创建过程中只执行一次3.Updation(更新):当页面中state,props的值开始改变时,执行这里的函数4.Unmounting(销毁):页面卸载时,自动执行
http://www.lryc.cn/news/103883.html

相关文章:

  • 如何将单体项目拆分成微服务
  • 【Vue框架】Vuex状态管理
  • Linked List
  • javascript数组基础
  • 【模型预测控制MPC】使用离散、连续、线性或非线性模型对预测控制进行建模(Matlab代码实现)
  • Golang之路---01 Golang VS Code创建项目
  • vue 表单form-item模板(编辑,查看,新建)
  • 【IC设计】DC工具的target、link、synthetic、symbol库
  • redisson常用APi-Example
  • 小程序学习(四):WXML模板语法
  • IDEA好用的插件总结
  • 如何在Linux系统中安装ActiveMQ
  • 【Latex】常用公式编辑与符号:公式换行,标号居中、常用符号等
  • 【ArcGIS Pro二次开发】(55):给多个要素或表批量添加字段
  • CentOS7.3 安装 docker
  • 代码随想录算法训练营第五十二天 | 300.最长递增子序列、674.最长连续递增序列、718.最长重复子数组
  • 1、Tomcat
  • centos 内网实现mail发送
  • 【雕爷学编程】MicroPython动手做(25)——语音合成与语音识别2
  • 如何用C#实现上位机与下位机之间的Wi-Fi通信?
  • 学习笔记|大模型优质Prompt开发与应用课(二)|第五节:只需3步,优质Prompt秒变应用软件
  • VB客运中心汽车售票管理系统设计与实现
  • 计算机网络——学习笔记
  • JSON对象
  • 26 用lsqnonlin求解最小二乘问题(matlab程序)
  • Verilog语法学习——LV6_多功能数据处理器
  • 发送信息----策略模式
  • PySpark介绍与安装
  • 细讲TCP三次握手四次挥手(三)
  • vue 组件中 data 为什么必须是函数