最近的工作都很忙,所以很少完整的时间可以用来总结和回顾知识点,今天就趁着是周末,我准备在这里复习和回顾一下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
原文地址:https://www.cnblogs.com/xiaoweihuang/p/9821677.html