【一起来学React】- 生命周期

本文为系列文章首发于我的博客：https://www.fakin.cn

上一章我们讲了一些react的基础知识，咱们这一章来说个好玩点的东西，react的生命周期（这一章基本是都是理论）
为了文章更加清晰简单，示例代码都是直接贴出，并不是真实情况的，
下面图片，都为上一章todolist的输出！

组件生命周期

React组件的生命周期可分成三个状态：

    Mounting：已插入真实 DOM
    Updating：正在被重新渲染
    Unmounting：已移出真实 DOM

下面我们来看下每个状态详细的生命周期函数

Mounting

    componentWillMount->当组件即将挂载到页面
    componentDidMount->当组件被挂载到页面后

其实我觉得render函数也是生命周期，一个完整的Mounting应该是这样的：

    componentWillMount->render->componentDidMount

class App extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        console.log('render')
    }
    componentWillMount(){
        console.log('componentWillMount')
    }
    componentDidMount(){
        console.log('componentDidMount')
    }
}

export default App;

这时我们来看控制台打印的结果，如下所示：
在这里插入图片描述

我想这下应该明白了Mounting状态下的两个（不算render）生命周期函数的具体意义了！其实从字面意思也能理解的~

Updating

顾名思义，明显就是升级、更新的意思，Updating就是组件更新的状态，这个状态下生命周期函数就有点多了！
在react的Updating状态下分别有props和states两种类型的生命周期函数！

props：

     componentWillReceiveProps：当一个组件从父组件接收了参数(props)，只有父组件的render函数被重新执行了，子组件的componentWillReceiveProps函数就会被执行
     shouldComponentUpdate：组件更新之前自动执行函数(要求返回一个布尔值必须，必须告诉react组件是否要更新)
     componentWillUpdate：组件更新之前自动执行,但是他在shouldComponentUpdate执行后返回true之后才执行，如果shouldComponentUpdate返回false不执行
     componentDidUpdate：组件更新完成之后

states：

    shouldComponentUpdate：组件更新之前自动执行函数(要求返回一个布尔值必须，必须告诉react组件是否要更新)
    componentWillUpdate：组件更新之前自动执行,但是他在shouldComponentUpdate执行后返回true之后才执行，如果shouldComponentUpdate返回false不执行
    componentDidUpdate：组件更新完成之后

其实props比起states的生命周期函数就多了一个componentWillReceiveProps而已，其他都是一样的！

一个完整的Updating应该是这样的：

    (componentWillReceiveProps)->shouldComponentUpdate(true)->componentWillUpdate-componentDidUpdate

其中componentWillReceiveProps需要特殊对待！只有在子组件接收了父组件的参数，并且父组件render重新执行才会触发这个，所以我写在括号里面了！

class App extends Component {
    constructor(props) {
        super(props);
    }
    componentWillReceiveProps() {
        console.log('componentWillReceiveProps')
    }
    render(){
        console.log('render')
    }
    shouldComponentUpdate(){
        console.log('shouldComponentUpdate')
        return true
    }
    componentWillUpdate(){
        console.log('componentWillUpdate')
    }
    componentDidUpdate(){
        console.log('componentDidUpdate')
    }
}

export default App;

ps：由于componentWillReceiveProps需要在子组件中，这里直接和其他的函数写的一起是为了看着更方便，真实的开发环境是在子组件下。
如图

在这里插入图片描述
看上图可以看到，红色是Mounting状态下的，而橘色是Updating状态下的，但是为什么只有四个生命周期函数了？
其实很简单，componentWillReceiveProps这里是肯定不会输出的，原因嘛，你看上文对于componentWillReceiveProps的解释

在这里插入图片描述
此图可以得到全部Updating状态的生命周期，
这里的生命周期，控制台输入的顺序，大家可以用之前我的todoList的案例去输出下，一定要去试一下哦~

Unmounting

之前说的mounting是挂载，那么Unmounting反过来就是卸载嘛，这个状态下只有一个生命周期函数。
componentWillUnmount->当组件在页面中即将被剔除时自动执行。
这个咱们可以去控制台输入看下。
（为了更好的理解，一下代码为子组件代码）

class Test extends Component {
    constructor(props) {
        super(props);
        this.state={
        }
    }
    render() {
        console.log('render')
    }
   componentWillUnmount(){
        console.log('componentWillUnmount')
   }
}

在这里插入图片描述
componentWillUnmount，在这张图上是不存在的，因为你这个生命周期是在子组件定义的，子组件还没有被卸载呢？

当我点击list的x的时候，那么就是子组件被卸载的时候，接下来你在看
在这里插入图片描述
这样是不是就有componentWillUnmount输出了！

总结：

1、render函数会在props和state改变的时候自动重新执行
2、componentWillReceiveProps是父组件传递props给子组件的时候才触发（当然有时候也会在父组件触发，componentWillReceiveProps会有一些bug例如触发多次等，所以react16中建议用getDerivedStateFromProps 替换 componentWillReceiveProps）
3、生命周期不难，只是需要全部死记硬背下来！

ps:文章的示例代码并不是真实生产的代码，只是为了更好理解，图片中的输出为上一章todolist实例输出！