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 排版

最新文章

  1. 关于tomcat的热部署
  2. Flash 二进制传图片到后台Java服务器接收
  3. 收缩SQL Server日志不是那么简单的（翻译）
  4. O2O地图应用之判断用户订单地址是否在服务范围内
  5. struts2视频学习笔记 13-14（自定义局部和全局类型转换器（转换Date格式））
  6. VS2010打开项目时，出现“已经在解决方案中打开了具有该名称的项目”问题的解决方案
  7. zookeeper监控告警
  8. memcached在Windows下的安装
  9. haproxy 关闭ssl 3.0 加密
  10. VSTO学习笔记（十五）Office 2013 初体验
  11. ramfs/tmpfs: Linux RAM filesystems
  12. html标签的嵌套规则分析
  13. git命令行工作的正确姿势
  14. Kon-boot v2.5介绍与使用方法总结（支持win10）
  15. C#/VB.NET设置Excel表格背景色
  16. Java设计模式学习总结
  17. Codeforces484 A. Bits
  18. Django 启动源码
  19. pycharm上传代码到github
  20. python---初始sqlite3

热门文章

  1. AutoIt实现文件上传
  2. 软件包，API，SDK的区别
  3. C#数据结构与算法系列（七）：约瑟夫问题（Josephu）
  4. WeChair项目Alpha冲刺(5/10)
  5. 安装mysql报错：遇到缺少vcruntime140_1.dll文件
  6. skywalking中文文档
  7. 学写PEP,参与Python语言的设计
  8. .NET Core加解密实战系列之——消息摘要与数字签名算法
  9. jQuery动态生成<select>下拉框
  10. C++ 简单的UDP客户端与服务端