React之生命周期

时间:2022-10-01 15:49:58

哈喽,这是我的第一篇博客,请大家多多关照~

追根溯源:What's the lifeCycle?

生命周期函数指在某一时刻组件会自动调用执行的函数;

React生命周期概览:

React之生命周期

接下来我们就着生命周期的概念(抠字眼:某一时刻    自动调用执行)来深入理解一下React;

render生命周期我们需要单独拎出来理解,因为触发到它的地方会比较多;render函数记住如下两点,就很好理解了:

①.当组件的 props 和 state 发生变化时,render函数重新执行;

②.当父组件的render函数被运行时,它的子组件的render函数都将被重新执行;

Initialization(setup props and state):React 中的初始化亦即 constructor ,固定写法如下: super(props) 主要用于继承;

React之生命周期

那么constructor算不算是React的生命周期呢,其实严格意义上来说是算不上的。因为constructor是ES6的特性,并非React所私有,所以严格意义上讲是不属于React的生命周期的;

Mounting(DOM挂载,首先我们明确一个问题,DOM挂载只会在页面初次渲染的时候调用);

componentWillMount:见名知意,该周期函数是 在DOM元素即将挂载到页面的时候 自动调用执行;

render:在页面初次渲染的时候也会调用render函数,调用时间段在 componentWillMount  之后,componentDidMount之前;

componentDidMount:见名知意,该周期函数是在 DoM元素挂载到页面的时候 自动调用执行;

Updation(更新):更新分为两种情况,一种是 props 发生变化,一种是 state 发生变化;下面先分享一下props和state公有的生命周期:

shouldComponentUpdate:组件被更新之前会被自动执行,要求返回布尔值(true or false),见名知意,询问组件是否要更新,如果返回结果为true,则继续更新,如果返回结果为false,则不再往下执行了;

componentWillUpdate:组件在更新之前并且在shouldComponentUpdate返回值为true时自动调用执行;

render:有更新,符合render重新渲染条件,则此时会重新渲染一遍;

componentDidUpdate:组件更新完成之后自动调用执行;

上述 shouldComponentUpdate,componentWillUpdate,componentDidUpdate 为 props和state 改变时公有的生命周期;然后在 props 发生变化时,还有一个独有的更新相关的生命周期:

componentWillReceiveProps:对于这个生命周期呢,见名知意,此生命周期跟props息息相关,那么跟props息息相关的就只有子组件了,关于它,有两种描述,便于理解:

①.当一个组件从父组件接收了参数,只要父组件的render函数被重新执行了,子组件的这个生命周期函数就会被执行;

②.换言之,如果此组件初次存在父组件中,该生命周期函数不会被执行,当第二次出现在父组件中时才会执行;

Unmounting(组件即将要从页面剔除的时候):

componentWillUnmount:当这个组件即将被从页面中剔除的时候,会自动调用执行;在被移除的一瞬间;(child componentWillUnmount);