【React学习笔记】React生命周期梳理(16.X前后两种)
React生命周期
「16版本以前的:」
生命周期流程图
组件从生成到被挂在到页面上的一系列过程
根据流程图打印的执行顺序图:
流程讲解:
初始化流程
start | 开始创建组件 | 在这个周期中做的事情 |
---|---|---|
检查 | 检查组件中是否有默认的属性、是否有属性校验 | |
constructor | 开始执行constructor构造函数 (讲解:constructor是生命周期的一部分。react.component就是一个抽象类,官方文档就是这么定义的。) |
构造类。在这里可以写一些状态 可以进行ajax数据请求 |
componentWillMount | 执行componentWillMount生命周期函数。此时组件即将挂载到页面上。 (类似vue的beforeMounte) 会有关于componentWillMount更名的信息提示 ![]() |
可以进行ajax请求 「(但是react官方不建议。因为可能后期会使用react Native时会与之发生冲突。而且官方特强硬的把这个周期函数给移除了。16.3版本以后移除了)」 也可以setState一下 |
render | 执行render函数渲染页面。 | 没必要进行ajax请求 「不能调用setState,否则会死循环。因为setState会触发shouldComponentUpdate,触发后如果返回true,又会走到render里。所以,render里只做数据渲染、展示就行,别进行setState」 |
componentDidMount | 执行componentDidMount生命周期函数。此时组件已经被挂载到页面中。 (类似vue的mounted) |
可以发送ajax、设置状态(setState)的「最好的地方」 |
组件运行流程
state值被改变
state被更改 | 组间运行中,state被更改 | |
---|---|---|
进行提问 是否继续? |
触发「shouldComponentUpdate」函数。提问组件是否要进行更新。 该函数接收两个参数:nextProps、nextStates 该函数需要返回布尔值来「回答」是否更新: return false不更改 - 流程回到state被更改前。 return true进行更改 - state更改,流程继续。 |
可以在参数里边知道将要更新的值 「可以比较值,发现需要更改的值与更改前后一致时,返回false,不触发更新。」 因为react没有vue那么智能,不知道要更改的内容是否真的发生了改变。「只要setState就会触发更新、只要触发了更新就会走剩下的流程。还会去对比虚拟dom、耗费性能 。其内部的子组件的生命周期也会触发一遍。」 shouldComponentUpdate(nextProps,nextStates){ return nextStates.count !== this.state.count } |
【回答】:是 | ||
componentWillUpdate | 执行conponentWillUpdate生命周期函数。告知组件即将开始进行更新。 | 千万不能设置状态,因为会又回到shouldComponentUpdate的死循环中。 没必要做ajax请求,即使做了也不能重新setState 基本上没什么用 |
render | 组间更新完毕,执行render函数重新渲染页面。 | (同上边的render。) |
componentDidUpdate | 执行componentDidUpdate生命周期函数。告知组件更新并渲染完毕。此时更新过的组件已经渲染到页面中。 | 千万不能设置状态,因为会又回到shouldComponentUpdate的死循环中。 没必要做ajax请求,即使做了也不能重新setState 基本上没什么用 |
【往复】:回到组件运行状态(等待) |
props改变,重新render
props属性是从父组件传过来的。当父组件改变了传递给子组件的数据时,子组件内部就会触发该函数。
以下流程发生在子组件内部:子组件内部
componentWillReceiveProps | 执行componentWillReciveProps生命周期函数。告知父组件改变了props的值。 接受参数:nextProps 初始化不执行,只有当props改变时才会执行 |
可以进行状态的设置: 因为其可以接受一个参数nextProps,然后把参数的属性值setState到this.state身上 可以发送ajax请求: 同上 「但是官方不建议这么做,认为是不合理的。所以在16.3以后的版本中移除了,该函数不能使用了。」 |
---|---|---|
【循环】:重走state值被更改的流程如下: | ||
进行提问 是否继续? |
触发shouldComponentUpdate函数。提问组件是否要进行更新。 该函数接收两个参数:nextProps、nextStates 该函数需要返回布尔值来「回答」是否更新: return false不更改 - 流程回到state被更改前。 return true进行更改 - state更改,流程继续。 |
|
【回答】:是 | ||
componentWillUpdate | 执行conponentWillUpdate生命周期函数。告知组件即将开始进行更新。 | 「在16.3以后的版本中移除了」 |
render | 组间更新完毕,执行render函数重新渲染页面。 | |
componentDidUpdate | 执行componentDidUpdate生命周期函数。告知组件更新并渲染完毕。此时更新过的组件已经渲染到页面中。 | |
【往复】:回到组件运行状态(等待) |
组件被移除、销毁
componentWillUnmount | 执行componentWillUnmount生命周期函数。告知即将销毁组件。 | 销毁组件前,可以先告知用户之类的。 |
---|---|---|
【销毁】:组件销毁完毕。 |
代码演示:
见github (https://github.com/xingorg1/JuFengGuo/tree/master/advanceCourse/react/3-react_lifecycle/src/components/before_16.3)
生命周期钩子函数的功能:
每个生命周期都可以用来干什么?详见上述表格中各对应列
「16.3版本以后的:」
「基本把‘xxWillxxx’等,带“Will”的钩子函数都删掉了」
生命周期流程图
组件从生成到被挂在到页面上的一系列过程。
根据流程图打印的执行顺序图:
流程讲解:
初始化流程
start | 开始创建组件 | 在这个周期中做的事情 |
---|---|---|
检查 | 检查组件中是否有默认的属性、是否有属性校验 | |
constructor | 开始执行constructor构造函数 (讲解:constructor是生命周期的一部分。react.component就是一个抽象类,官方文档就是这么定义的。) |
构造类。在这里可以写一些状态 可以进行ajax数据请求(要不要在constructor里获取数据) |
static getDerivedStateFromProps(props,state) | 执行一个静态的方法。从属性中去获得状态**。** 「初始化就会执行」 「这样,更改state和更改props,就不会走两套路线了,而是都走这一个。」 「必须返回一个state的对象。否则报错如下」 Warning: Father.getDerivedStateFromProps(): A valid state object (or null) must be returned. You have returned undefined. 「return的返回值,就会放到组件的state状态中」 参数:props、state,就是当前组件的属性状态值和属性值 |
|
render | 执行render函数渲染页面。 | 没必要进行ajax请求 「不能调用setState,否则会死循环。因为setState会触发shouldComponentUpdate,触发后如果返回true,又会走到render里。所以,render里只做数据渲染、展示就行,别进行setState」 |
componentDidMount | 执行componentDidMount生命周期函数。此时组件已经被挂载到页面中。 (类似vue的mounted) |
可以发送ajax、设置状态(setState)的「最好的地方」 |
组件运行流程
state 或 props其中任意一个被改变后
static getDerivedStateFromProps(props,state) | state或props更改,都会执行这个静态的方法。从属性中去获得状态**。** 「这样,更改state和更改props,就不会走两套路线了,而是都走这一个。」 「必须返回一个state的对象。否则报错如下」 Warning: Father.getDerivedStateFromProps(): A valid state object (or null) must be returned. You have returned undefined. |
|
---|---|---|
进行提问 是否继续? |
触发shouldComponentUpdate函数。提问组件是否要进行更新。 该函数接收两个参数:nextProps、nextStates 该函数需要返回布尔值来「回答」是否更新: return false不更改 - 流程回到state被更改前。 return true进行更改 - state更改,流程继续。 |
可以在参数里边知道将要更新的值 「可以比较值,发现需要更改的值与更改前后一致时,返回false,不触发更新。」 因为react没有vue那么智能,不知道要更改的内容是否真的发生了改变。「只要setState就会触发更新、只要触发了更新就会走剩下的流程。还会去对比虚拟dom、耗费性能 。其内部的子组件的生命周期也会触发一遍。」 shouldComponentUpdate(nextProps,nextStates){ return nextStates.count !== this.state.count } |
【回答】:是 | ||
render | 组件更新完毕,执行render函数重新渲染页面。 | (同上边的render。) |
getSnapshotBeforeUpdate(prevProps,prevState) | 执行这个函数,获取之前状态的一个快照。 「需要有返回值。其返回值供下边的钩子函数componentDidUpdate中接受并使用。」 ![]() 「所以该函数必须和componentDidUpdate函数写在一起。」 |
|
componentDidUpdate | 执行componentDidUpdate生命周期函数。告知组件更新并渲染完毕。此时更新过的组件已经渲染到页面中。 「可支持接受三个参数。分别是prevProps、prevState、snapShot」 「其中,snapShot是getSnapshotBeforeUpdate的返回值」 ** ![]() |
千万不能设置状态,因为会又回到shouldComponentUpdate的死循环中。 没必要做ajax请求,即使做了也不能重新setState 基本上没什么用 |
【往复】:回到组件运行状态(等待) |
组件被移除、销毁
componentWillUnmount | 执行componentWillUnmount生命周期函数。告知即将销毁组件。 | |
---|---|---|
【销毁】:组件销毁完毕。 |
代码演示:
见github (https://github.com/xingorg1/JuFengGuo/tree/master/advanceCourse/react/3-react_lifecycle/src/components/after_16.3)
生命周期钩子函数的功能:
每个生命周期都可以用来干什么?详见上述表格中各对应列
本文使用 mdnice 排版
【React学习笔记】React生命周期梳理(16.X前后两种)的更多相关文章
- Angular 5.x 学习笔记(2) - 生命周期钩子 - 暂时搁浅
Angular 5.x Lifecycle Hooks Learn Note Angular 5.x 生命周期钩子学习笔记 标签(空格分隔): Angular Note on cnblogs.com ...
- MVC学习笔记---MVC生命周期及管道
ASP.NET和ASP.NET MVC的HttpApplication请求处理管道有共同的部分和不同之处,本系列将体验ASP.NET MVC请求处理管道生命周期的19个关键环节. ①以IIS6.0为例 ...
- Java Web学习笔记-Servle生命周期
Servlet会在服务器启动或第一次请求该Servlet的时候开始生命周期,在服务器停止的时候结束生命周期. 无论请求多少次Servlet,最多只有一个Servlet实例.多个客户端并发请求Servl ...
- android学习笔记 activity生命周期&任务栈&activity启动模式
activity生命周期 完整生命周期 oncreate->onstart->onresume->onpause->onstop->ondestory 使用场景:应用程序 ...
- iOS学习笔记—ViewController/生命周期
ViewController是iOS应用程序中重要的部分,是应用程序数据和视图之间的重要桥梁,ViewController管理应用中的众多视图.iOS的SDK中提供很多原生ViewController ...
- MVC学习笔记---MVC生命周期
Asp.net应用程序管道处理用户请求时特别强调"时机",对Asp.net生命周期的了解多少直接影响我们写页面和控件的效率.因此在2007年和2008年我在这个话题上各写了一篇文章 ...
- Vue2学习笔记:实例生命周期
实例生命周期 每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后在数据变化时更新 DOM .在这个 ...
- VUE 学习笔记 二 生命周期
1.除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法.它们都有前缀 $,以便与用户定义的属性区分开来 var data = { a: 1 } var vm = new Vue({ el: ' ...
- Android学习笔记_18_Activity生命周期 及 跳转方式
一.Activity有三个状态: 1.当它在屏幕前台时(位于当前任务堆栈的顶部),它是激活或运行状态.它就是响应用户操作的Activity. 2. 当它上面有另外一个Activity,使它失去了焦点但 ...
- AngularJs学习笔记-组件生命周期
组件生命周期 (1)组件生命周期钩子 constructor:组件创建时被创建 ngOnChanges: 父组件修改或初始化子组件的输入属性时被调用,如果子组件没有输入属性,则永远不会被调用,它的首次 ...
随机推荐
- 读懂操作系统之虚拟内存TLB与缓存(cache)关系篇(四)
前言 前面我们讲到通过TLB缓存页表加快地址翻译,通过上一节缓存原理的讲解为本节做铺垫引入TLB和缓存的关系,同时我们来完整梳理下从CPU产生虚拟地址最终映射为物理地址获取数据的整个过程是怎样的,若有 ...
- 写一个通用的List集合导出excel的通用方法
前几天要做一个数据导出Excel 我就打算写一个通用的. 这样一来用的时候也方便,数据主要是通过Orm取的List.这样写一个通用的刚好. public static void ListToExcel ...
- java并发编程系列原理篇--JDK中的通信工具类Semaphore
前言 java多线程之间进行通信时,JDK主要提供了以下几种通信工具类.主要有Semaphore.CountDownLatch.CyclicBarrier.exchanger.Phaser这几个通讯类 ...
- WPF入门(2)——依赖属性
今天我们说说依赖属性 什么是依赖属性? 当然,学术定义依旧Please Baidu:https://baike.baidu.com/item/%E4%BE%9D%E8%B5%96%E5%B1%9E%E ...
- 【JMeter_10】JMeter逻辑控制器__ForEach控制器<ForEach Controller>
ForEach控制器<ForEach Controller> 业务逻辑: ForEach控制器一般与用户自定义变量/JDBC结果变量一起使用,可以认为他就是一种遍历型循环,该节点下的脚本内 ...
- rust 支持的CPU架构
Available CPUs for this target: native - Select the CPU of the current host (currently haswell). amd ...
- C# WPF - MVVM实现OPC Client管理系统
前言 本文主要讲解采用WPF MVVM模式设计OPC Client的过程,算作对于WPF MVVM架构的学习记录吧!不足之处请不吝赐教,感谢! 涉及知识点 C#基础 Xaml基础 命令.通知和数据绑定 ...
- 从一个计算器开始说起——C#中的工厂方法模式
工厂模式作为很常见的设计模式,在日常工作中出镜率非常高,程序员们一定要掌握它的用法哟,今天跟着老胡一起来看看吧. 举个例子 现在先让我们来看一个例子吧,比如,要开发一个简单的计算器,完成加减功能,通过 ...
- Java 多线程基础(七)线程休眠 sleep
Java 多线程基础(七)线程休眠 sleep 一.线程休眠 sleep sleep() 方法定义在Thread.java中,是 static 修饰的静态方法.sleep() 的作用是让当前线程休眠, ...
- c++11新特性注意点
本文记录下一些c++11新特性需要注意的方面,供日后参考 一.auto auto可以当成“占位符”,根据右边的类型自动推导出变量的类型.需要注意的是 auto不能解决溢出的问题. auto可以与指针和 ...