React生命周期钩子

最近的工做都很忙，因此不多完整的时间能够用来总结和回顾知识点，今天就趁着是周末，我准备在这里复习和回顾一下React的基础。工做中主要用的vue比较多，在工做中使用React也已是一年前了，当时用的蚂蚁金服的antd框架，相比vue，我我的仍是比较喜欢写React的，其实vue跟React之间除了写法上的差别，也很是类似的，学会了其中一个，要学另外一个的话都是很容易的。

用过React的同窗都知道，React的特性之一就是组件化，组件都有一个生命周期，这个生命周期包括组件的实例化、更新与销毁阶段，在组件的不一样生命周期钩子函数里咱们能够对组件进行相应的操做，如更新或者销毁等。说到React组件，它的写法也有三种两大类，一类是无状态组件，也就是函数式组件，它们也存在实例化、更新、销毁期，可是没有对外暴露相应的生命周期钩子，另外一类就是有状态组件，这一类组件有两种写法，第一种写法就是ES5的React.createClass，第二种写法则是ES6的React.Component，可是在这篇博客里咱们不讨论React组件的写法，要了解相关知识的同窗请自行百度或者查阅React官方文档，这篇博客咱们主要讨论一下有状态组件的不一样生命周期的钩子函数。

关于React的生命周期，前面也说到了，主要有三个阶段：实例化、更新和销毁。

第一次被建立时，也就是实例化时，如下方法依次被调用：

一、getDefaultProps
二、getInitialState
三、componentWillMount
四、render
五、componentDidMount

当组件已经渲染好后，组件也就进入更新期，在更新期会执行如下函数：

一、componentWillReceiveProps
二、shouldComponentUpdate
三、componentWillUpdate
四、render
五、componentDidUpdate

最后，每当React使用完一个组件，这个组件必须从 DOM 中卸载后被销毁，此时 componentWillUnmout 会被执行，完成全部的清理和销毁工做，在 componentDidMount 中添加的任务都须要再该方法中撤销，如建立的定时器或事件监听器。

来源地址：https://www.f2ecoder.net/879.html