react组件的生命周期(react组件的生命周期函数)

发布网友 发布时间：2024-09-27 15:57

我来回答

共1个回答

热心网友 时间：2024-09-29 11:14

react生命周期：指的是一个React组件在创建到销毁经过的一系列过程，基本可以分为挂载、更新和卸载三个周期（可能表述不太精准）。

生命周期钩子函数：指的是React组件在经过某些特殊的过含雀正程是会触发组件里面特定的方法，这里称为钩子函数（下面举三个常用的钩子函数）。

举几个简单例子：（具体全量的可以自行百度下，都有比较全面的介绍的）

componentWillMount:?挂载之前触发调用次函数，可以操作数据，此时还没有生成实际的DOM，处于VirtualDOM的状态。（这岁清个状态可以做一些数据处理，查询、处理页面渲染需要的数据）

componentDidMount:页面已经渲染完成，在网页上已经生成实际的DOM（此时可谈悔以操作页面的dom元素，document.getElementById可以获取到具体的dom对象，比如获取canvas对象，加载echarts图面，都可以在这个函数里进行操作）

componentWillUnmount:组件卸载之前触发这个方法。（在这里可以处理一些页面状态销毁的操作，例如clearTimeout等）

React组件生命周期的阶段是什么

React组件的生命周期有三个不同的阶段：

*初始渲染阶段：*这是组件即将开始其生命之旅并进入DOM的阶段。

*更新阶段：*一旦组件被添加到DOM，它只有在prop或状态发生变化时喊粗碧才可能更凳基新和重新渲染。这些只发生在这个阶段。

*卸载阶段：*这是组件生命周期的最后阶段，组件被销毁并从DOM中删除。郑举

React，现在学习前端肯定要学到的知识，想了解更多知识，可以看黑马程序员react视频教程，里面知识还是蛮多的！

React生命周期

一、react组件的生命周期

1、生命周期指的是组件从初始化开始到结束的过程?或者是生命周期是描述react组件从开始到结束的过程斗铅

2、每个react组件都具有生命周期

3、react都对组件通过生命周期给拆销腊予的钩子函数进行管理

二、钩子函数

指的是系统某些状态和参数发生改变的时候，系统立马去通知对应处理的函数??叫做钩子函数；一方面又变动。另一方面立马去处理

三、react组件经历总体阶段

1、mounted阶段?加载阶段?或者说初始化阶段?这个阶段组件由jsx转换成真实dom

2、update阶段组件运行中阶段或者更新阶段?当组件修改自身状态，或者父组件修改子组件属性的时候发生的阶段

3、umount阶段?组件卸载阶段?这个一般是组件被浏览器回收的阶段

四、生命周期整体流程：

1、实例化

getDefaultProps取得默认属旅滑性

getInitialState初始化状态

componentWillMount即将进入dom

render描画dom

componentDidMount已经进入dom

2、具体的声明函数周期---运行中阶段?数据更新过程

运行中阶段只有在父组件修改了子组件的属性或者说一个组件修改自身的状态才会发生的情况

1、组件将要接受新值componentWillReceiveProps（已加载组件收到新的参数时调用）

2、组件是否更新shouldComponentUpdate?（影响整个项目的性能，决定视图的更新）

3、组件即将更新componentWillUpdate

4、必不可少的render

5、组件更新完毕时运行的函数componentDidUpdate

3、销毁时componentWillUnmount

卸载组件

ReactDOM.unmountComponentAtNode(‘节点’)

react中生命周期函数主要分为三个阶段

1.创建阶段

2.运行阶段

3.销毁阶段

先给你的props创建一个默认值??this.state={}

?this.state={}

this.state是用来初始化组件的私有数据的，它定义在组件的consturctor构造器函数中，

this.state会第一时间被初始化，因为class类中，只要new这个类，必然会调用consturctor构造器

???组件将要被创建（还没被创建，我们的数据将在这个阶段拿到。一般在这个阶段发送ajax请求）

??这个函数是组件的虚拟DOM元素，将要挂载到页面上的时候执行

????当执行凳拿到这个生命周期函数的时候，即将要开始渲染内存中的虚拟DOM了，当这个函数执行完，内存中就有了一个渲染好的虚拟DOM,但是页面上尚未真正的显示DOM元素呢。

render()

??创建虚拟DOM

componentDidMount()

??将虚拟DOM渲染到页面上

??在这个函数中，我们可以放心的操作页面上需要操作的DOM元素

??所以说我们如果想操作DOM元素，最早只能在????componentDidMount()中操作。

???componentDidMount()是创建阶段的最后一个函数。

this.setState()???更改了state值，页面就会自动更新

通过状态或属性的改变，都会触发组件的更新

componentWillReceiveProps???

只皮粗前有当外界传递给自组建的属性被修改了，才会触发这个钩子函数

shouleComponentUpdate

组件是否要被更新

在shouleComponentUpdate中，要求必须返回一个布尔值。

如果返回值为false，则不会执行后面的生命周期函数，而是直接退回了‘运行中’的状态。后面的render()没被调用，因此页面不会被更新，但是组件中的state状态，却被修改了。

componentWillUpdate

组件将要被更新，此时组件还没有被更新，此时得到的元素是页面上旧的dom元素。

this.ref.***

render???

重新渲染内存中的虚拟DOM对象,此时获取到页面上的dom元素还是之前旧的dom元素

当render调用完毕，我们的虚拟DOM树已经和组件的state保持一直了，

componentDidUpdate??

页面更新完毕，新的dom已经画到(渲染到)页面上。

此时state中的数据，虚拟DOM，页面上的DOM都是最新的燃清，此时就可以放心大胆的操作了。

componentWillUnmount

在这个钩子函数中，组件尚可被使用，还没开始卸载

componentWillReceiveProps()

当父组件传递给子组件的props值发生变化的时候，就会触发这个钩子函数。

react生命周期是一个组件从生到死的一个过程，react为生命周期提供了一些关键节点，即会被触发的事件，来让组件方便处理各种场景。

生命周期可以分为三种状态：Mounting实际的、DOMUpdating插入了正在重新渲染、Unmounting实际笑袜DOM已删除。贺冲

使用生命周期的方法有：

1、componentWillMount在渲染之前调用，在客户端也是如此。

2、componentDidMount：第一次呈现之后调用，仅在客户端。后面的组件已经生成了相应的DOM结构，可以通过this.getDOMNode()访问。

3、ComponentWillReceiveProps在组件收到新的prop(Update)时调用。初始化禅升歼render时不调用此方法。

React的生命周期从广义上分为三个阶段：挂载、渲染、卸载，因此可以把React的生命周期分为两类：挂载卸载过程和更新过程。

一、挂载卸载过程

1.constructor，完成了React数据的初始化；

2.componentWillMount，组件初始化数据后，但是还未渲染DOM前；

3.componentDidMount，组件第一次渲染完成，此时dom节点已经生成；

4.componentWillUnmount，组件的卸载和数据的销毁。

二、更新过程

1.componentWillReceiveProps?(nextProps)，父组件改变后的props需要重新渲染组件时；

2.shouldComponentUpdate(nextProps,nextState)，主要用于性能优化(部分更新)，因为react父组件的重新渲染会导致其所有子组件的重新渲染，这个时候其实我们是不需要所有子组件都跟着重新渲染的，在这里returnfalse可以阻止组件的更新穗弯余；

3.componentWillUpdate(nextProps,nextState)，shouldComponentUpdate返回true后，组件进入重新渲染的流程；

4.componentDidUpdate(prevProps,prevState)，组件更新完毕后触发；

5.render()，渲染时触发。

三、父子组件加载顺序

观察父子组件的挂载生命周期函数，可以发现挂载时，子组件的挂载钩子先被触发猜滚；卸载时，子组件的卸载钩子后被触发。

我们经常在挂载函数上注册监听器，说明此时是可以与页面交互的，也就是说其实所有挂载钩子都是在父组件实际挂载到dom树上才触发的，不过是在父组件挂载后依次触发子组件的componentDidmount，最后再触发自身的挂载钩子，说白了，componentDidMount其实是异步钩子。

相反，卸载的时候父节点先被移除，再从上至下依次触发子组闹镇件的卸载钩子；

但是我们也经常在卸载钩子上卸载监听器，这说明?componentWillUnmount其实在父组件从dom树上卸载前触发的，先触发自身的卸载钩子，但此时并未从dom树上剥离，然后依次尝试触发所有子组件的卸载钩子，最后，父组件从dom树上完成实际卸载。