React生命周期

React生命周期

## 挂载阶段

constructor(props)

组件挂载之前调用

static getDerivedStateFromProps()

getDerivedStateFromProps 的存在只有一个目的：让组件在 props 变化时更新 state

render()

componentDidMount()

会在组件挂载后（插入 DOM 树中）立即调用。依赖于 DOM 节点的初始化应该放在这里。如需通过网络请求获取数据，此处是实例化请求的好地方

## 更新阶段

static getDerivedStateFromProps()

shouldComponentUpdate(nextProps,nextState)

是否更新组件视图,state 和 props 还未更改，如果要获取更新后的state 和 props 请使用 nextProps,nextState

返回true或者false, 如果是true 则更新视图，false，不更新视图

首次渲染或使用 forceUpdate() 时不会调用该方法

render()

getSnapshotBeforeUpdate(prevProps, prevState)

props和state是当前更新完毕的新值，如果要和之前值的做对比，以前的值获取用prevProps, prevState

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

componentDidUpdate(prevProps, prevState, snapshot)

componentDidUpdate() 会在更新后会被立即调用。首次渲染不会执行此方法

可以在此处对 DOM 进行操作，如果props有变化，可以在此进行网络请求

直接调用 setState()，但请注意它必须被包裹在一个条件语句里，否则会导致死循环

## 卸载阶段

componentWillUnmount()

componentWillUnmount() 会在组件卸载及销毁之前直接调用