React学习笔记02---生命周期函数

前言:在学习完了React中基础的JSX语法、基本的函数式组件和类式组件、三大属性state,props,refs之后。这次的博客内容主要是记录一下学习生命周期函数的相关内容，主要强调各生命周期函数的使用阶段和使用频率高低。React中的很多行为比如消息订阅与发布，异步ajax请求，设置定时等都需要在生命周期函数中进行。虽然React的生命周期函数众多，但是我们在日常开发中所用到的只有少数几个，掌握好常用的几个生命周期函数就足够了。

整体概括图

在React中的每一个组件实例的生命周期包括了初始化阶段，状态更新阶段，实例销毁阶段。不同的阶段存在着不同的生命周期函数，将按照上述分类进行简单的介绍。

旧版生命周期函数示意图

新版生命周期函数

       部分老的生命周期函数官方现已不推荐使用，在未来的升级版本中很大概率直接会删除掉，因此，本篇博客的内容主要介绍一下目前推荐使用的生命周期函数。

一、初始化阶段

1.1 constructor()构造函数

        这也是第一个开始执行的生命周期函数，只在组件初始化的时候执行一次。其作用是初始化函数内部的状态state，绑定函数的属性和方法。一般而言，状态可以直接写在组件的开头，而不必写在构造函数内部。如下图所示：

state={
  users:[
   {name:'xiaoming',age:12},
   {name:'xiaohong',age:24},
   {name:'xiaoli',age:25}
]
}

1.2 static getDerivedStateFromProps()

        这是新版本的生命周期函数中所新增的，一般而言很少会使用到。直接从字面意思上翻译看，就是在render()方法之前，通过props返回一个对象来更新状态state，在组件的初始化和更新中调用。在类式组件中使用static关键字我们都知道表示的是类原型的静态方法，其接收两个参数，一个是props，另外一个是state,用传入的props的值来代替现在组件中的state，此声明周期函数命名语义化十分明显，有助于理解记忆。

static getDerivedStateFromProps(props) {
    return props;    //count的值一直是通过props传入的111,并不会发生任何改变。
}
ReactDOM.render(<Count count="111"/>,document.getElementById('root'))

1.3 render()

        此生命周期函数在组件中是唯一一个必须存在的，作用是将必要的渲染结果作为返回值交出去。在React中，页面的渲染是由状态来驱动的，而如果在render函数中设置了setState（）方法则会陷入到状态不断更新驱动页面渲染的死循环中，这是需要十分注意的一点。

1.4 componentDidMount（）

      直接从字面上翻译就是当前组件已经挂载完毕，初始化执行挂载的操作已经基本完成，通常我们在页面挂载完毕后就可以向后台发送ajax异步请求获取数据，开启定时器和组件之间的消息订阅与发布也可以在此组件中完成。此组件在开发中用的比较频繁，应该着重理解其使用场合。

老版本中的一个生命周期函数componentWillMount（）现在已不推荐使用，其适用场合也十分有限，被人误用的概率较大，很容造成潜在不易察觉的bug存在。

二、状态更新阶段

2.1 getDerivedStateFromProps()

getDerivedStateFromProps()不仅在初始化阶段执行，在状态更新时同样的可以调用。

2.2 shouldComponentUpdate()

此声明周期函数在组件更新之前调用，相当于在组件更新之前加了一道阀门，控制组件在满足什么样的条件时会进行更新，可以通过返回值来控制组件是否更新，允许更新返回 true ，返回为false则不更新，不使用此声明周期函数时其默认返回值为true。

2.3 render()

 此生命周期函数在每次状态更新的时候都会进行调用，其是否执行由shouldComponentUpdate()的返回值来进行控制。

2.4 getSnapshotBeforeUpdate（）

    在最近一次的渲染完成后输出到页面之间被调用，也就是即将在挂载时被调用。如果需要使用到最新状态更新后挂载前状态的数值时，可以使用此函数进行snap shot(快照)将原状态保存下来便于进行某些操作。

2.5 componentDidMount（）

     组件更新完成后调用，其作用同初始化阶段一样，到此组件的更新挂载已经完成。

三、组件实例销毁阶段

     组件销毁也就是组件卸载，在组件的功能完成后不再使用时，我们应该对组件实例进行销毁，在销毁组件实例前，我们需要做一些打扫工作，比如取消设置的定时器，取消消息订阅等。不进行这些操作后期可能会导致内存泄漏的问题发生。React为我们提供了一个生命周期函数用于处理这些事情。

3.1 componentWillUnmount()

       直接从字面意思上理解就是组件即将卸载了，你还有什么事情要做的话可以在这个函数体内进行操作，主要的事情无非是上述的删除定时器，取消消息订阅等。这也是使用频率非常高的一个生命周期函数哦，要牢记其作用。

四、总结归纳

       恰当的使用生命周期函数会使得我们的开发变得更加有效率，React官方所给出的生命周期函数比较多，但主要使用到的就是render()、componentDidMount()、componentWillUnmount()、getDerivedStateFromProps()这几个生命周期函数，其余的生命周期函数在用的时候直接查阅官方文档即可，关于React中生命周期函数的学习就记录到这里了，下一篇将简单的介绍一下前端框架中虚拟DOM转换成真实DOM的diff算法原理，这也是面试中常见的一个问题。

只有你自己知道你想去的地方，也只有你自己一步步的踏实走下去才能到达。

北海虽赊，扶摇可接。