React 初探 [五] React 组件的生命周期

说起生命周期，最先接触的是Andorid 开发中 Activity 和 Fragment 的生命周期，再者是Vue 组件，那么今天要梳理的是React 组件的生命周期，可见对生命周期的理解和掌握对组件化开发时非常重要的。

概述

生命周期是什么？生命周期就是指一个对象的生老病死，而此处的对象就是React 组件，组件的生命周期也就是从其创建到销毁的过程，而且在整个过程中，React 组件暴露出来了一些函数，在特定的阶段进行回调，我们称之为生命周期回调函数或者钩子函数，这些回调函数主要是给开发暴露了操作的入口，在某个特定的阶段可以做一些需要的操作。

主要钩子函数

•  constructor()
• componentWillMount()
•  render()
•  componentDidMount()
•  componentWillUpdate()
• componentWillUnmount()

主要执行过程

     1、第一次初始化渲染显示：ReactDOM.render()

•            constructor() 创建对象 初始化 state
•            componentWillMount() :将要插入的回调
•            render(): 用于插入虚拟DOM 回调
•            componentDidMount() 已经插入回调

     2、每次更新state ：this.setState()

•            componentWillUpdate():将要更新回调
•            render() : 更新 重新渲染

     3、移除组件：ReactDOM.unmountComponentAtNode(containerDom)

•            componentWillUnmount() 组件将要被移除回调

小案例练习

需求：

1. 让指定的文本做显示/隐藏的动画
2. 切换时间为2s
3. 点击按钮从界面中移除组件界面

gif图我还不会弄，所以效果 把代码贴出来需要的自己跑起来看效果吧

code:

总结及注意：

1.     代码中打印了钩子函数的调用顺序可以自己打印看效果
2.     在组件对象销毁之前，有些不会销毁的对象要手动销毁，不然很容易造成内存泄漏，如 定时器对象
3.     需要公用的属性或者对象 ，可以定义在全局，定义在全局组件里 如代码中的定时器对象。