专栏首页前端说吧【React学习笔记】React生命周期梳理(16.X前后两种)

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • React - 组件:类组件

    他有自己的生命周期也有react给他提供的一些内置函数方法。有自己的this和状态。

    xing.org1^
  • JS-制作留言提交系统(支持ctrl+回车)

    xing.org1^
  • vue - 使用vue实现自定义多选与单选的答题功能

    xing.org1^
  • react --- React中state和props分别是什么?

    组件从概念上看就是一个函数,可以接受一个参数作为输入值,这个参数就是props,所以可以把props理解为从外部传入组件内部的数据。由于React是单向数据流,...

    小蔚
  • React中的State与Props

    一个组件的显示形态可以由数据状态和外部参数决定,其中,数据状态为 state,外部参数为 props

    Leophen
  • [笔记]深入理解React生命周期

    原文:https://www.gitbook.com/book/developmentarc/react-indepth/details

    江米小枣
  • 【CCAI大咖秀】AlphaGo/Mobileye教父:智能科学需要融合机器学习、计算神经科学与认知科学

    用户1737318
  • Exploit自动生成引擎:Rex

    来自 UCSB 的团队 Shellphish,为参加 DARPA 举办的 CGC 竞赛,设计并实现了 CRS(Cyber Reasoning System)Me...

    FB客服
  • 【DL笔记1】Logistic Regression:最基础的神经网络

    从【DL笔记1】到【DL笔记N】,是我学习深度学习一路上的点点滴滴的记录,是从Coursera网课、各大博客、论文的学习以及自己的实践中总结而来。从基本的概念、...

    beyondGuo
  • Memory Transformer,一种简单明了的Transformer改造方案

    Transformer在广泛的自然语言处理和其他任务中非常成功。由于具有自我注意机制,可以训练Transformer层以使用在整个序列上聚合的信息来更新每个元素...

    kaiyuan

扫码关注云+社区

领取腾讯云代金券