react 生命周期函数

Posted 2022-05-06 ly2019

什么是生命周期函数呢？

生命周期函数指的是某一时刻组件会自动调用执行的函数，比如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元素。