生命周期
初始化阶段(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)