什么是生命周期函数呢?
生命周期函数指的是某一时刻组件会自动调用执行的函数,比如render函数,当props或state发生改变的时候,render函数就会自动被调用重新执行。
1)组件初始化(Initialization)阶段
对于react组件来说,它会经历一些过程,Initialization指的是初始化过程,这个时候组件会初始化自己的一些数据,比如在constructor定义state,接收props。
2) 组件挂载(Mounting)阶段
组件初始化之后,会被渲染,再挂载到页面上。从图中我们可以看到,mounting阶段有三个生命周期函数,componentWillMount,render,componentDidMount。组件即将被挂载到页面时,会自动执行componentWillMount函数;组件挂载到页面之后,componentDidMount函数会自动执行,这两个生命周期函数只会执行一次。render函数在state、props发生改变时就会自动执行,可以执行多次。
3) 组件更新(Updation)阶段
在数据发生变化的时候,组件就会被更新。如果是props发生了变化,componentWillReceiveProps生命周期函数会被自动执行。当组件没有props参数时,不会被执行。组件若是要从父组件接收参数,只要父组件的render函数被重新执行了,子组件的componentWillReceiveProps函数就会被执行。注意:react初次渲染时这个函数不会被执行。
shouldComponentUpdate函数,在组件更新之前会被自动执行,它返回的是一个布尔值,判断是否重新渲染组件,默认返回true。作用是有些变化不需要重新渲染组件,可以在该函数内阻止。
componentWillUpdate函数,也是在组件更新之前会被执行,但是在componentShouldUpdate执行并返回true之后才会被执行。
当componentWillUpdate执行之后,render函数会被执行。当render函数执行完成以后,componentDidUpdate会被执行。componentDidUpdate的主要作用是,在组件更新之后操作DOM元素。
4)组件卸载(Unmounting)阶段
componentWillUnmount函数在组件从页面卸载之前被调用。作用是,在该方法中执行必要的清理,比如无效的定时器或者在componentDidMount中创建的DOM元素。