React-class Component
初次挂载:
constructor()
挂载类组件的时候,先执行构造函数static getDerivedStateFromProps()
会在调用 render 方法之前调用,并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state,如果返回 null 则不更新任何内容。render()
渲染真实的DOM节点componentDidMount()
会在组件挂载后(插入 DOM 树中)立即调用。依赖于 DOM 节点的初始化应该放在这里。如需通过网络请求获取数据,此处是实例化请求的好地方。
更新:
static getDerivedStateFromProps() 同一次挂载时的 getDerivedStateFromProps() 一致
shouldComponentUpdate() 可以在这里进行性能优化,减少浅层比较
render() 插入真实的DOM节点树上
getSnapshotBeforeUpdate() 能在最近一次渲染中,从之前的DOM拿到一些有用的信息,比如滚动位置等
componentDidUpdate()
当组件更新后,可以在此处对 DOM 进行操作。如果你对更新前后的 props 进行了比较,也可以选择在此处进行网络请求。(例如,当 props 未发生变化时,则不会执行网络请求)
卸载:
componentWillUnmount() 这里是卸载及销毁组件前的调用方法 可以在这里清空一些数据,比如取消网络请求、 componentDidmount中创建的一些数据等等
错误处理:
static getDerivedStateFromError()
这个生命周期会在后代组件抛出错误后被调用。 它将抛出的错误作为参数,并返回一个值以更新 state。常用做组件异常的捕获,并渲染一个替补组件给用户展示,而不是导致整个SPA程序挂掉componentDidCatch()
此生命周期在后代组件抛出错误后被调用。 它接收两个参数:error
—— 抛出的错误。info
—— 带有componentStack
key 的对象,其中包含有关组件引发错误的栈信息componentDidCatch()
会在“提交”阶段被调用,因此允许执行副作用。 它应该用于记录错误之类的情况