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前后两种)的更多相关文章

  1. Angular 5.x 学习笔记(2) - 生命周期钩子 - 暂时搁浅

    Angular 5.x Lifecycle Hooks Learn Note Angular 5.x 生命周期钩子学习笔记 标签(空格分隔): Angular Note on cnblogs.com ...

  2. MVC学习笔记---MVC生命周期及管道

    ASP.NET和ASP.NET MVC的HttpApplication请求处理管道有共同的部分和不同之处,本系列将体验ASP.NET MVC请求处理管道生命周期的19个关键环节. ①以IIS6.0为例 ...

  3. Java Web学习笔记-Servle生命周期

    Servlet会在服务器启动或第一次请求该Servlet的时候开始生命周期,在服务器停止的时候结束生命周期. 无论请求多少次Servlet,最多只有一个Servlet实例.多个客户端并发请求Servl ...

  4. android学习笔记 activity生命周期&任务栈&activity启动模式

    activity生命周期 完整生命周期 oncreate->onstart->onresume->onpause->onstop->ondestory 使用场景:应用程序 ...

  5. iOS学习笔记—ViewController/生命周期

    ViewController是iOS应用程序中重要的部分,是应用程序数据和视图之间的重要桥梁,ViewController管理应用中的众多视图.iOS的SDK中提供很多原生ViewController ...

  6. MVC学习笔记---MVC生命周期

    Asp.net应用程序管道处理用户请求时特别强调"时机",对Asp.net生命周期的了解多少直接影响我们写页面和控件的效率.因此在2007年和2008年我在这个话题上各写了一篇文章 ...

  7. Vue2学习笔记:实例生命周期

    实例生命周期 每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后在数据变化时更新 DOM .在这个 ...

  8. VUE 学习笔记 二 生命周期

    1.除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法.它们都有前缀 $,以便与用户定义的属性区分开来 var data = { a: 1 } var vm = new Vue({ el: ' ...

  9. Android学习笔记_18_Activity生命周期 及 跳转方式

    一.Activity有三个状态: 1.当它在屏幕前台时(位于当前任务堆栈的顶部),它是激活或运行状态.它就是响应用户操作的Activity. 2. 当它上面有另外一个Activity,使它失去了焦点但 ...

  10. AngularJs学习笔记-组件生命周期

    组件生命周期 (1)组件生命周期钩子 constructor:组件创建时被创建 ngOnChanges: 父组件修改或初始化子组件的输入属性时被调用,如果子组件没有输入属性,则永远不会被调用,它的首次 ...

随机推荐

  1. 读懂操作系统之虚拟内存TLB与缓存(cache)关系篇(四)

    前言 前面我们讲到通过TLB缓存页表加快地址翻译,通过上一节缓存原理的讲解为本节做铺垫引入TLB和缓存的关系,同时我们来完整梳理下从CPU产生虚拟地址最终映射为物理地址获取数据的整个过程是怎样的,若有 ...

  2. 写一个通用的List集合导出excel的通用方法

    前几天要做一个数据导出Excel 我就打算写一个通用的. 这样一来用的时候也方便,数据主要是通过Orm取的List.这样写一个通用的刚好. public static void ListToExcel ...

  3. java并发编程系列原理篇--JDK中的通信工具类Semaphore

    前言 java多线程之间进行通信时,JDK主要提供了以下几种通信工具类.主要有Semaphore.CountDownLatch.CyclicBarrier.exchanger.Phaser这几个通讯类 ...

  4. WPF入门(2)——依赖属性

    今天我们说说依赖属性 什么是依赖属性? 当然,学术定义依旧Please Baidu:https://baike.baidu.com/item/%E4%BE%9D%E8%B5%96%E5%B1%9E%E ...

  5. 【JMeter_10】JMeter逻辑控制器__ForEach控制器<ForEach Controller>

    ForEach控制器<ForEach Controller> 业务逻辑: ForEach控制器一般与用户自定义变量/JDBC结果变量一起使用,可以认为他就是一种遍历型循环,该节点下的脚本内 ...

  6. rust 支持的CPU架构

    Available CPUs for this target: native - Select the CPU of the current host (currently haswell). amd ...

  7. C# WPF - MVVM实现OPC Client管理系统

    前言 本文主要讲解采用WPF MVVM模式设计OPC Client的过程,算作对于WPF MVVM架构的学习记录吧!不足之处请不吝赐教,感谢! 涉及知识点 C#基础 Xaml基础 命令.通知和数据绑定 ...

  8. 从一个计算器开始说起——C#中的工厂方法模式

    工厂模式作为很常见的设计模式,在日常工作中出镜率非常高,程序员们一定要掌握它的用法哟,今天跟着老胡一起来看看吧. 举个例子 现在先让我们来看一个例子吧,比如,要开发一个简单的计算器,完成加减功能,通过 ...

  9. Java 多线程基础(七)线程休眠 sleep

    Java 多线程基础(七)线程休眠 sleep 一.线程休眠 sleep sleep() 方法定义在Thread.java中,是 static 修饰的静态方法.sleep() 的作用是让当前线程休眠, ...

  10. c++11新特性注意点

    本文记录下一些c++11新特性需要注意的方面,供日后参考 一.auto auto可以当成“占位符”,根据右边的类型自动推导出变量的类型.需要注意的是 auto不能解决溢出的问题. auto可以与指针和 ...