react组件的生命周期

简介: 生命周期:组件从诞生到销毁会经历一系列的过程,该过程就叫做生命周期。React在组件的生命周期中提供了一系列的`钩子函数``(类似于事件),可以让开发者在函数中注入代码,这些代码会在适当的时候运行。

含义,生命周期是啥?


生命周期:组件从诞生到销毁会经历一系列的过程,该过程就叫做生命周期。React在组件的生命周期中提供了一系列的`钩子函数``(类似于事件),可以让开发者在函数中注入代码,这些代码会在适当的时候运行。在vue 的组件里面,也存在生命周期,详情查看


在react 中,存在两种组件,类组件和函数式组件,但是生命周期主要式之在类组件的。


生命周期仅存在于类组件中,函数组件每次调用都是重新运行函数,旧的组件即刻被销毁


react 的生命周期分为两种,一种是版本为小于16.0.0的旧版本的生命周期,另一种是大于16.0.0的新版本的生命周期。


旧生命周期(版本小于16.0.0)


生命周期的过程如下图:


20210221155111914.png


分析


挂载阶段


1.constructor

  1.同一个组件对象只会创建一次

  2.不能在第一次挂载到页面之前,调用setState,为了避免问题,构造函数中严禁使用setState


2.componentWillMount

  1.正常情况下,和构造函数一样,它只会运行一次

  2.可以使用setState,但是为了避免bug,不允许使用,因为在某些特殊情况下,该函数可能被调用多次


3.render

  1.返回一个虚拟DOM,会被挂载到虚拟DOM树中,最终渲染到页面的真实DOM中

  2.render可能不只运行一次,只要需要重新渲染,就会重新运行

  3.严禁使用setState,因为可能会导致无限递归渲染


4.componentDidMount

  1.只会执行一次

  2.可以使用setState

  3.通常情况下,会将网络请求、启动计时器等一开始需要的操作,书写到该函数中


5.组件进入活跃状态


6.componentWillReceiveProps

  1.即将接收新的属性值

  2.参数为新的属性对象

  3.该函数可能会导致一些bug,所以不推荐使用


7.shouldComponentUpdate

  1.指示React是否要重新渲染该组件,通过返回true和false来指定

  2.默认情况下,会直接返回true


8.componentWillUpdate

  1.组件即将被重新渲染


9.componentDidUpdate

  1.往往在该函数中使用dom操作,改变元素,这里可以操作原生的dom


10.componentWillUnmount

  1.通常在该函数中销毁一些组件依赖的资源,比如计时器


新生命周期(版本大于16.0.0)


20210221155844374.png


1.getDerivedStateFromProps(静态的)

  1.通过参数可以获取新的属性和状态

  2.该函数是静态的

  3.该函数的返回值会覆盖掉组件状态

  4.该函数几乎是没有什么用


2.getSnapshotBeforeUpdate

  1.真实的DOM构建完成,但还未实际渲染到页面中。

  2.在该函数中,通常用于实现一些附加的dom操作

  3.该函数的返回值,会作为componentDidUpdate的第三个参数


新版的生命周期和旧版的生命周期相比:


1.去除了componentWillMount,把componentWillReceiveProps 变成 getDerivedStateFromProps 去掉的这两个生命钩子函数都是在实际开发中,比怎么常用的,


2.增加getSnapshotBeforeUpdate 这个生命钩子很有用,原来操作dom 是直接在componentDidUpdate ,现在直接放在获取更新前的快照,并且把结果返回给componentDidUpdate 的第三个参数

react 始终贯彻 数据是单项的,谁的数据谁就有权更改,其他人无权,这个原则在vue 中也是同样的模式,千万不要使用反模式的方式,徒增烦恼

相关文章
|
2月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
73 0
|
9天前
|
前端开发
React生命周期
React生命周期
10 0
|
2月前
|
前端开发 JavaScript 开发者
在React中,如何利用生命周期方法管理组件的状态和行为?
【5月更文挑战第29天】在React中,如何利用生命周期方法管理组件的状态和行为?
26 3
|
2月前
|
前端开发 JavaScript 调度
React的生命周期是什么
【5月更文挑战第29天】React的生命周期是什么
22 1
|
2月前
|
前端开发 JavaScript
React生命周期方法在实际开发中的应用场景有哪些?
【4月更文挑战第6天】 React 生命周期方法应用于数据获取、订阅管理、渲染逻辑处理、用户交互响应、性能优化、资源清理、强制更新、错误处理、动画实现、代码分割、服务端渲染、路由处理、依赖注入和集成第三方库。它们帮助控制组件行为和性能,但现代开发推荐使用Hooks替代部分生命周期方法。
26 0
|
2月前
|
前端开发 JavaScript
react生命周期函数
react生命周期函数
17 0
|
2月前
|
前端开发 JavaScript 开发者
浅谈React生命周期
浅谈React生命周期
18 0
|
2月前
|
存储 前端开发 中间件
React组件间的通信
React组件间的通信
29 1
|
2月前
|
前端开发
React旧有生命周期和新生命周期的解析
React旧有生命周期和新生命周期的解析
34 0
React旧有生命周期和新生命周期的解析
|
2月前
|
前端开发 应用服务中间件 数据库
react服务端组件
react服务端组件
31 0