React ：Class组件的生命周期详解

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() 会在“提交”阶段被调用，因此允许执行副作用。 它应该用于记录错误之类的情况

 

 

    

转载于:https://my.oschina.net/u/4150694/blog/3068096