生命周期是一个抽象的概念,分成了很多个阶段:
1.比如装载阶段(Mount),组件第一次在DOM树中被渲染的过程;
2.比如更新过程(Update),组件状态发生变化,重新更新渲染的过程;
3.比如卸载过程(Unmount),组件从DOM树中被移除的过程;React内部为了告诉我们当前处于哪些阶段,会对我们组件内部实现的某些函数进行回调,这些函数就是生命周期函数:
1.比如实现componentDidMount函数:组件已经挂载到DOM上时,就会回调;
2.比如实现componentDidUpdate函数:组件已经发生了更新时,就会回调;
3.比如实现componentWillUnmount函数:组件即将被移除时,就会回调;
(注意:函数式组件是没有生命周期函数的)
- componentDidMount中的操作
componentDidMount()会在组件挂载后(插入DOM树中)立即调用。
1.依赖于DOM的操作;
2.发送网络请求;(官方建议)
3.添加一些订阅;(会在componentWillUnmount取消订阅);
- componentDidUpdate中的操作
componentDidUpdate()会在更新后被立即调用,首次渲染不会执行此方法。
1.当组件更新后,可以在此处对DOM进行操作;
2.如果你对更新前后的props进行了比较,也可以选择在此处进行网络请求;
- componentWillUnmount
componentWillUnmount()会在组件卸载及销毁之前直接调用。
1.在此方法中执行必要的清理操作;
2.清除timer,取消网络请求或清除在componentDidMount()创建的订阅等;