组件生命周期

生命周期就是组件加载的一个流程

• 初始化组件
• 渲染组件
• 更新组件
• 删除组件

组件的生命周期

当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()

 mounting 加载组件

• constructor() 构造器函数 初始化数据状态 比如state的初始化
• render() 返回一个 Virtual DOM（虚拟DOM）
• componentDidMount() Dom 节点插入之后调用的生命函数，（主要做网络请求和setState更改数据状态）

 我们看一下加载顺序

updating 更新组件 当状态数据发生改变的时候，会触发这个生命函数

组件更新的生命周期调用顺序如下：

• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

render() 再次调用

componentDidUpdate() 数据状态更新之后会调用

• DOM 操作
• 网络请求
• setState()

unmounting 卸载组件

componentWillUnmount() 组件在卸载之前会调用这个方法

• 清除 timer 计时器
• 取消网络请求
• 清除在 componentDidMount() 中创建的订阅

错误处理：

当渲染过程，生命周期，或子组件的构造函数中抛出错误时，会调用如下方法：

• static getDerivedStateFromError()
• componentDidCatch()

ReactDOM.unmountComponentAtNode(container)用于卸载我们的组件

• 参数就是我们插入组件的容器，dom 对象，这个dom对象就是我们document.getElementById() 获取的根节点