Web开发编程网
分享Web开发相关技术

React生命周期钩子

最近的工作都很忙,所以很少完整的时间可以用来总结和回顾知识点,今天就趁着是周末,我准备在这里复习和回顾一下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 中添加的任务都需要再该方法中撤销,如创建的定时器或事件监听器。

未经允许不得转载:WEB开发编程网 » React生命周期钩子
微信扫码关注微信公众号

WEB开发编程网

谢谢支持,我们一直在努力

安全提示:您正在对WEB开发编程网进行赞赏操作,一但支付,不可返还。