React中的生命周期函数

生命周期函数是指在某一个时刻组件会自动调用执行的函数
render函数会在state或props值发生改变的时候重新执行一次,它是自动被组件调用重新执行的。所以render函数是一个生命周期函数。
constructor构造函数,在组件创建的时候,constructor也会被自动调用执行,它是在组件一创建的时候被调用,但是,constructor并不是react所独有的,它是ES6语法中自带的函数,所以它属不属于生命周期函数都行。
在这里插入图片描述
对于一个React组件来说它会经历一些过程。

Initialization指的是初始化过程,这个时候组件会初始化一些数据,比如state,props。constructor构造函数里就是初始化的位置。
在这里插入图片描述
初始化之后,一个组件要被渲染,然后挂载到页面上,所以它会经历一个流程Mounting。挂载会经历几个周期,在组件将第一次被挂载到页面的时候,componentWillMount会在组件即将被挂载到页面的时刻自动执行,即将被挂载到页面,也就是还没有被挂载到页面但是马上要被挂载到页面的那一时刻componentWillMount函数会被执行
在这里插入图片描述
在这里插入图片描述
componentDidMount会在组件被挂载到页面之后自动执行
在这里插入图片描述
当我们在输入框中随便输入值的时候,只有render函数会再次重新执行,但componentWillMount和componentDidMount并不会再次执行,因为componentWillMount和componentDidMount只在页面挂载前和挂载之后执行一次
在这里插入图片描述
Updation组件更新的流程,在组件更新的过程中也会涉及到新的生命周期函数,组件更新,要么props改变,要么states改变,也就是数据改变时页面会更新,但是props改变和states改变流程略微不同。它们有共同的方法,shouldComponentUpdate组件被更新之前会自动执行,这个生命周期函数要求你返回Boolean类型的结果
在这里插入图片描述

在这里插入图片描述
每次在输入内容时都会执行,所以它会在组件更新之前运行,这个生命周期函数要求返回Boolean值是因为它实际上是问组件需要更新么,如果返回false,就说明不需要更改组件,它后面的生命周期函数就都不会执行,一般来说这个生命周期函数都会返回true
在这里插入图片描述
componentWillUpdate组件被更新之前自动执行,但是在shouldComponentUpdate之后执行,如果shouldComponentUpdate返回true它才执行,返回false,componentWillUpdata就不会执行。componentWillUpdate是否执行取决于shouldComponentUpdate的返回结果。
接着就是render函数执行。
componentDidUpdate组件更新完成后会被执行。
在这里插入图片描述
componentWillReceiveProps如果一个组件没有接收props参数时这个生命周期函数是不执行的。当一个组件从父组件接收了参数,如果这个组件第一次存在于父组件中不会执行;如果这个组件之前已经存在于父组件中才会执行。
componentWillUnmount当组件从页面剔除时会被执行。
每一个组件都会有这些生命周期函数,不仅仅只有父组件才会有,子组件也会有。

猜你喜欢

转载自blog.csdn.net/u013565133/article/details/88714211