react组件生命周期理解
组件的三个生命周期状态
- Mounting：插入真实DOM（挂载）
- Updating：被重新渲染（更新）
- Unmounting：被移除真实DOM（卸载）
挂载阶段的生命周期函数
- constructor(props)
应当做些初始化的动作，如：初始化state，将事件处理函数绑定到类实例上
- static getDerivedStateFromProps(props,state)
在组件实例化后,和接受新的props后被调用。
他必须返回一个对象来更新状态,或者返回null表示新的props不需要任何state的更新。
如果是由于父组件的props更改，所带来的重新渲染，也会触发此方法
- render()
render()方法是必需的。当他被调用时，他将计算this.props和this.state， 并返回以下一种类型：
- React元素。通过jsx创建，既可以是dom元素，也可以是用户自定义的组件。
- 字符串或数字。他们将会以文本节点形式渲染到dom中。
- null，什么也不渲染
- 布尔值。也是什么都不渲染。
- componentDidMount()
组件被装配后立即调用。初始化使得DOM节点应该进行到这里。
通常在这里进行ajax请求
如果要初始化第三方的dom库，也在这里进行初始化。
只有到这里才能获取到真实的dom.
挂载阶段又分为三个过程：
1.将要挂载：componentWillMount
2.执行render方法渲染页面，render方法在挂载阶段会执行
3.挂载完成：componentDidMount（只执行一次）
更新阶段的生命周期函数
- static getDerivedStateFromProps(props, state)
组件每次被rerender的时候，包括在组件构建之后(虚拟dom之后，实际dom挂载之前)，每次获取新的props或state之后；每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state；配合componentDidUpdate，可以覆盖老版的componentWillReceiveProps的所有用法
- shouldComponentUpdate(nextProps, nextState)
组件接收到新的props或者state时调用，return true就会更新dom（使用diff算法更新），return false能阻止更新（不调用render）
- render()
- getSnapshotBeforeUpdate(prevProps, prevState)
必须和componentDidUpdate一起使用
必须返回一个值
不能和旧版本的钩子函数一起使用
目的是为了返回数据更新之前的状态
在react render()后的输出被渲染到DOM之前被调用。它使您的组件能够在它们被潜在更改之前捕获当前值（如滚动位置）。这个生命周期返回的任何值都将作为参数传递给componentDidUpdate（）。
- componentDidUpdate()
当组件更新时，将此作为一个机会来操作DOM。
只要您将当前的props与以前的props进行比较
（例如，如果props没有改变，则可能不需要网络请求），这也是做网络请求的好地方。
卸载阶段的生命周期函数
componentWillUnmount()
此方法在组件被卸载前调用，执行任何必要的清理，例如使定时器无效，取消网络请求或清理在componentDidMount中创建的任何监听,在此生命周期使用setState不会触发。