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 中也是同样的模式,千万不要使用反模式的方式,徒增烦恼

相关文章
|
3月前
|
前端开发 JavaScript
React 组件生命周期
React 组件生命周期
37 0
|
2月前
|
前端开发 JavaScript
react 组件的生命周期
React组件的生命周期包括从创建到销毁的各个阶段,如挂载(mounting)、更新(updating)和卸载(unmounting)。每个阶段都有特定的方法,用于控制组件的行为和状态,确保高效、有序地渲染和管理UI。
|
4月前
|
前端开发 JavaScript 开发者
介绍一下React生命周期
介绍一下React生命周期
115 9
|
3月前
|
存储 前端开发 JavaScript
深入理解React组件的生命周期与Hooks
【10月更文挑战第7天】深入理解React组件的生命周期与Hooks
157 0
|
5月前
|
前端开发 JavaScript
React 组件的生命周期阶段详解
【8月更文挑战第30天】
56 7
|
4月前
|
前端开发 API UED
React组件生命周期详解
【9月更文挑战第4天】在React应用开发中,掌握组件生命周期对于管理状态和属性至关重要,并能有效提升应用性能。本文详细介绍了React组件生命周期的三个阶段:挂载、更新和卸载,并通过代码示例展示了如何避免状态更新导致的死循环及优化网络请求等问题,帮助开发者构建更高效、可维护的应用。
97 2
|
5月前
|
前端开发 JavaScript
React 组件生命周期方法详解
【8月更文挑战第30天】
66 5
|
5月前
|
前端开发 JavaScript 开发者
React生命周期方法完全指南:深入理解并高效应用每个阶段的钩子——从初始化到卸载的全方位解析
【8月更文挑战第31天】本文详细介绍了React组件生命周期方法,包括初始化、挂载、更新和卸载四个阶段的关键钩子。通过探讨每个阶段的方法,如`componentDidMount`和`componentWillUnmount`,帮助开发者在正确时机执行所需操作,提升应用性能。文章还提供了最佳实践,指导如何避免常见错误并充分利用最新钩子。
126 0
|
5月前
|
前端开发 JavaScript 开发者
React 中的生命周期方法是什么?
【8月更文挑战第31天】
58 0
|
5月前
|
前端开发 JavaScript 开发者
React 组件生命周期的详细描述
【8月更文挑战第24天】
54 0