react 生命周期

Posted 2023-05-07

参考技术A 参考： https://www.cnblogs.com/erbingbing/p/10211495.html  //react 版本迭代

https://www.jianshu.com/p/2c85958371af

react的生命周期。分为三个阶段

1.组件的创建阶段。组件的生命周期函数只执行一次。

componentWillMount:组件将要被挂载。

render:第一次开始渲染真正的虚拟DOM，当render执行完。内存中就有完整的虚拟DOM了。

componentDidMount:组件完成挂载，此时组件已经显示在页面上。

2.组件运行阶段。根据组件state和props的改变。

componentWillReceiveProps:组件将要接受新的属性。

shouldComponentUpdate：组件是否需要进行更新。此时，组件尚未被更新。

componentWillUpdate:组件将要被更新。

componentDidUpdate:此时页面被重新渲染。

render:根据新的state和props重新的渲染内存中的虚拟DOM数。

3.组件的销毁阶段：

componentWillUnmount：组件将要被卸载的时候。

react中的生命周期函数

参考技术A 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值发生变化的时候，就会触发这个钩子函数。