聊聊React的生命周期

前言：react的生命周期描述了react组件从初始化，组件运行，更新和销毁的整个过程，其中react为某些生命周期环节提供了钩子函数，便于开发者进行业务逻辑编写。

1、初始化阶段

• getDefaultProps： 获取初始化props，由组件内部调用，不提供钩子函数，在初始化state之前
• initState：初始化state，constructor()中初始化state
• static getDerivedStateFromProps(preProps,preState)：这是一个静态方法，每次在re-rendering之前调用，此方法用来替代componentWillMount和componentWillReceiveProps，componentWillMount和componentWillReceiveProps因为安全性问题即将被抛弃。里面两个参数分别保存了上一次更新时的props与state。此函数必须返回一个值，如果props传入的内容不需要影响到你的state，那么就需要返回一个null，这个返回值是必须的，所以尽量将其写到函数的末尾。
• render()：调用render函数，生成虚拟dom,diff算法，渲染UI
• componentDidMount()：组件渲染完成时的钩子函数

2、运行阶段

• static getDerivedStateFromProps(preProps,preState)：state或者props改变导致组件重新渲染
• shouldComponentUpdate()：render之前，可以根据其返回值来判断是否重新渲染，若返回true则重新渲染，反之则不渲染
• render()： 重新渲染

• getSnapshotBeforeUpdate(preProps,preState)：在最近一次渲染输出（提交到dom）之前调用，它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期的任何返回值将作为参数传递给 componentDidUpdate()。必须返回一个值或者null

• componentDidUpdate(preProps,preState,snapshot)：组件更新之后的钩子函数

3、销毁阶段

• componentWillUnmount()：组件被销毁之前的钩子函数

图解：