react 的生命周期

整体上来讲，React生命周期分为了 挂载 、 更新 、 卸载 以及 捕错 四个状态阶段。每种状态里需要执行若干个生命周期函数，这些函数可能会在不同的阶段里重新被调用。

挂载：

constructor()

constructor方法在组件建立前被调用。

1. 在这个方法里面，应该先调用super(props)，否则this.props就会未定义。
2. 这个方法的主要用途是，初始化props，state和绑定方法。
3. 如果在里面用props为state赋值，那么最好把state提升，也可以在getDerivedStateFromProps()里面用props为state赋值。

static getDerivedStateFromProps()

        React生命周期的命名一直都是非常语义化的，这个生命周期的意思就是从props中获取state。这个生命周期的功能实际上就是将传入的props映射到state上面。

       这个生命周期函数是为了替代componentWillReceiveProps存在的，所以在你需要使用componentWillReceiveProps的时候，就可以考虑使用getDerivedStateFromProps来进行替代了。

       两者的参数是不相同的，而getDerivedStateFromProps是一个静态函数，也就是这个函数不能通过this访问到class的属性，也并不推荐直接访问属性。而是应该通过参数提供的nextProps以及prevState来进行判断，根据新传入的props来映射到state。

       需要注意的是，如果props传入的内容不需要影响到你的state，那么就需要返回一个null，这个返回值是必须的，所以尽量将其写到函数的末尾。

static getDerivedStateFromProps(nextProps, prevState) {
    const {type} = nextProps;
    // 当传入的type发生变化的时候，更新state
    if (type !== prevState.type) {
        return {
            type,
        };
    }
    // 否则，对于state不进行任何操作
    return null;
}

在下列三种情况下，会调用getDerivedStateFromProps方法：

返回一个对象以更新状态，或返回null表明不需要更新状态

1. 组件实例化。
2. 组件的props发生变化。
3. 父组件重新渲染。

UNSAFE_componentWillMount()

这个方法在render方法执行前被调用。官方不建议用这个方法，所以给它加了一个UNSAFE前缀。官方建议把要在这里面写的内容放到constructor()或者componentDidMount()里面。

render()

必须的钩子函数，不应该改变组件的状态，且不与浏览器交互。

当调用render的时候，组件会检查props和state并返回下列类型中的一个：

1. react元素。
2. 字符串或者数字。
3. Portals。
4. null。(不渲染)
5. Booleans。(不渲染)
6. react.Fragment。

componentDidMount()

组件挂载后立刻调用，实现远端网络请求的地方。

需要注意的是，在这里调用setState()会发生第二次render，但是这第二次render会发生在浏览器渲染之前，所以用户往往看不到第二次渲染，即使这样，也要小心使用这个方法，因为它会造成性能问题。

更新：

属性或状态发生改变后，会触发一次更新，组件重新渲染，下述方法会被调用。

UNSAFE_componentWillReceiveProps()

在下列情况下，会调用UNSAFE_componentWillReceiveProps方法，但是官方不建议使用这个方法，官方建议使用static getDerivedStateFromProps方法。

1. 组件的props发生改变。
2. 父组件发生重新渲染。

需要注意的是，在初始化props的时候并不会调用这个方法，this.setState()也不会触发这个方法。

static getDerivedStateFromProps()

见上。

shouldComponentUpdate()

在挂载了的组件属性变化和状态变化时调用。通过控制返回的boolean值告诉React是否重新渲染该组件。

使用shouldComponentUpdate()以让React知道当前状态或属性的改变是否不影响组件的输出。默认行为是在每一次状态的改变重渲，在大部分情况下应该依赖于默认行为。

当接收到新属性或状态时，shouldComponentUpdate() 在渲染前被调用。默认为true。该方法并不会在初始化渲染或当使用forceUpdate()时被调用。

当他们状态改变时，返回false 并不能阻止子组件重渲。

当前，若shouldComponentUpdate()返回false，而后UNSAFE_componentWillUpdate()，render()， 和 componentDidUpdate()将不会被调用。

UNSAFE_componentWillUpdate()

这个方法会在接受新props和state之后调用。官方不建议在里面调用setState()，要使用的话，建议在getDerivedStateFromProps方法里面使用。

render()

见上。

getSnapshotBeforeUpdate()

这个方法会在把渲染结果提交到DOM之前被调用。它可以返回一个参数，这个参数被componentDidUpdate(prevProps, prevState, snapshot)方法的第三个参数接收。

componentDidUpdate()

这个方法会在组件更新前被调用，所以最好在这里面操作DOM。适合发送请求的地方。

卸载：

 componentWillUnmount()

componentWillUnmount()在组件被卸载和销毁之前立刻调用。可以在该方法里处理任何必要的清理工作，例如解绑定时器，取消网络请求，清理任何在componentDidMount环节创建的DOM元素。

错误处理：

componentDidCatch()

错误边界捕捉发生在子组件树中任意地方的JavaScript错误,不要在里面改变数据流，它也不能处理本身抛出的错误。

 

 

 

参考文章：

  https://segmentfault.com/a/1190000017175195

  https://www.cnblogs.com/yangzhou33/p/8799278.html