React复习 （一） 生命周期

生命周期

image

初始化阶段(initialization)

constructor()

加载的时候调用一次，可以初始化state

挂载(Mounting)阶段

static getDerivedStateFromProps(props, state)

组件每次被rerender的时候，包括在组件构建之后(虚拟dom之后，实际dom挂载之前)，每次获取新的props或state之后；每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state；配合componentDidUpdate，可以覆盖componentWillReceiveProps的所有用法

render()

react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行

componentDidMount()

组件挂载到DOM后调用，且只会被调用一次

更新(Updating)阶段

父组件重新render或组件本身setState都会引起组件更新

static getDerivedStateFromProps(props, state)

组件每次被rerender的时候，每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state

shouldComponentUpdate(nextProps, nextState)

组件接收到新的props或者state时调用，return true就会更新dom（使用diff算法更新），return false能阻止更新

getSnapshotBeforeUpdate(prevProps, prevState)

在render之后，在组件dom渲染之前；返回一个值，作为componentDidUpdate的第三个参数；配合componentDidUpdate, 可以覆盖componentWillUpdate的所有用法

componentDidUpdate()

组件加载时不调用，组件更新完成后调用

卸载(Unmounting)阶段

componentWillUnmount()

此方法在组件被卸载前调用，可以在这里执行一些清理工作，比如清楚组件中使用的定时器，清楚componentDidMount中手动创建的DOM元素等，以避免引起内存泄漏。

错误处理（Error Handling）

componentDidCatch(error，info)