React生命周期钩子

Posted 2021-01-14 xiaoweihuang

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

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

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

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

1、getDefaultProps
2、getInitialState
3、componentWillMount
4、render
5、componentDidMount

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

1、componentWillReceiveProps
2、shouldComponentUpdate
3、componentWillUpdate
4、render
5、componentDidUpdate

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

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