首页 > 其他分享 >基础篇——三、组件的生命周期

基础篇——三、组件的生命周期

时间:2022-10-20 17:46:52浏览次数:55  
标签:生命周期 render 基础 更新 state 调用 props 组件

三、组件的生命周期

只有类组件才有生命周期,函数组件没有生命周期

1,挂载阶段

被创建,执行初始化,并被挂载到dom,完成第一次渲染。依次调用:

constructor

  • 是es6 class的构造方法。接收一个props参数,props是从父组件传入的属性对象,如果父组件没有传入而组件自身定义了默认属性,那么props指向组件的默认属性。constructor通常用于初始化组件的state以及绑定事件处理方法等工作。

componentWillMount

  • 在组件被挂载到DOM前调用,且只会调用一次,在该方法中执行的工作都可以提前到constructor,在这个方法中调用this.setState不会引起组件的重新渲染。

render

  • 这是定义组件唯一必要的方法。根据props和state返回一个React元素,用于描述UI。render并不负责组件的实际渲染工作,真正的渲染是React自身负责。render是一个纯函数,在这个方法中不能执行任何有副作用的操作,例如:不能调用this.setState。

componentDidMount

  • 在组件被挂载到DOM前调用,且只会调用一次。这时候可以获取到DOM结构。这个方法通常还用于向服务器请求数据。在这个方法中调用this.setState引起组件的重新渲染。

2,更新阶段

props或state可以引起组件更新。

  • props引起的组件更新本质上是由渲染该组件的父组件引起的,当父组件的render被调用,组件会发生更新。无论props是否改变,父组件render方法每一次调用都会导致组件更新。
  • state引起的组件更新是通过调用this.setState修改组件state触发的。

此阶段依次调用:

componentWillReceiveProps(nextProps)

  • 只在props引起的组件更新过程中才会被调用,state引起的组件更新不会触发。nextProps是父组件传递给当前组件的新的props,但是父组件传递给子组件的props可能没有变化,因此需要比较nextProps和this.props来决定是否执行后续逻辑。
  • this.state指向更新前的state。

shouldComponentUpdate(nextProps,nextState)

  • 该方法返回true,组件继续更新;返回false,组件停止更新。一般通过比较nextProps、nextState和当前的props、state来决定返回结果,默认返回true。
  • 该方法可以用来减少组件不必要的渲染,优化组件性能。
  • this.state指向更新前的state
  • 不能在该方法中调用setState,否则会引起循环调用的问题。

componentWillUpdate(nextProps,nextState)

  • 作为组件更新发生前执行某些工作的地方,一般很少用。
  • this.state指向更新前的state。
  • 不能在该方法中调用setState,否则会引起循环调用的问题。

render

  • this.state指向更新后的state。

componentDidUpdate(prevProps、prevState)

  • 组件更新后被调用,可以作为操作更新后的DOM的地方。这个方法的两个参数prevProps、prevState代表组件更新前的props和state。
  • this.state指向更新后的state。

3,卸载阶段

componentWillUnmount

  • 卸载前调用,可以在这里执行一些清理工作,比如定时器、componentDidMount中手动创建的DOM元素等。

标签:生命周期,render,基础,更新,state,调用,props,组件
From: https://www.cnblogs.com/sxww-zyt/p/16810716.html

相关文章

  • 基础篇——四、列表和Keys
    四、列表和Keys渲染列表数据是非常常见的场景,例如做一个展示用户的列表,需要根据获取的用户数据进行渲染列表。classUserListextendsComponent{constructor(){......
  • 防火墙基础之BGP路由技术安全防护内网安全​
    防火墙基础之BGP路由技术安全防护内网安全​原理概述:​防火墙(英语:Firewall)技术是通过有机结合各类用于安全管理与筛选的软件和硬件设备,帮助计算机网络于其内、外网之间构建......
  • UI组件
    UI组件基本UI组件文本组件按钮组件日期时间类组件ImageView文本框语法用于显示文本信息属性<TextView android:layout_width="wrap_content" android:l......
  • 服务器端调用Word组件读取Word权限、未将对象引用到对象实例终极解决方案
    最近因为业务需要,需要在服务器上调用Word组件,结果遇到各种问题,比如检索COM类工厂中CLSID为{000209FF-0000-0000-C000-000000000046}的组件失败、未将对象引用到对象......
  • 【THM】-Post-Exploitation Basics(后渗透基础)-学习
    观前提示本文相关的TryHackMe实验房间链接:https://tryhackme.com/room/postexploit介绍本文主要涉及关于后渗透的基础知识,主要内容有:使用powerview和Bloodhound进行后......
  • uniapp 关于全局提示组件 感悟
    web端可能可以,但是小程序就算了,小程序的话有一个插件能但是也繁琐,所以我的想法是这样的:参考:参考博客 自解决:跳转的时候携带code,判断code是什么然后显示啥,,,, ......
  • Liunx网络基础知识(一)
    Liunx网络基础知识标签(空格分隔):Liunx基本命令和网络介绍OSI模型七层模型物理层【网卡】主要功能是完成相邻节点之间原始比特流的传输。物理层协议关心的典型问题是......
  • 零基础python 第六章
    实例1输出每日一贴(共享版)deffunction_tips():'''功能:每天输出一条励志文字'''importdatetimemot=["今天星期一:\n坚持下去不是因为我很坚强,而且因为......
  • 防火墙基础之总部与总部之间OSPF路由配置​
    防火墙基础之总部与总部之间OSPF路由配置​原理概述:​防火墙(英语:Firewall)技术是通过有机结合各类用于安全管理与筛选的软件和硬件设备,帮助计算机网络于其内、外网之间构建一......
  • 【考点15】第十四章: 程序设计基础
    【考点1】程序设计方法与风格形成良好的程序设计风格需注意:    1、源程序文档化;    2、数据说明的方法;    3、语句的结构;     4、输入和输出。  【考......