那些UNSAFE 的生命周期

componentWillMount

Dan解答

JS 是单线程，Ajax 请求不会 "返回" 并且触发当我们正在 rendering 的时候（Ajax 的执行结果会放到任务队列中，等主线程执行完后采取读取任务队列中的任务进行执行），因为理论上放在哪里结果都一样，都会执行两次 render。

只有调用componentDidMount后，React才能保证稍后调用componentWillUnmount进行清理，所以建议把异步获取外部数据写在componentDidMount生命周期里，这样就能保证componentWillUnmount生命周期会在组件移除的时候被执行，避免内存泄漏的风险。

componentWillReceiveProps

componentWillReceiveProps生命周期是在props更新时触发。一般用于props参数更新时同步更新state参数。但如果在componentWillReceiveProps生命周期直接调用父组件的某些有调用setState的函数，会导致程序死循环。

componentWillUpdate

生命周期在视图更新前触发。一般用于视图更新前保存一些数据方便视图更新完成后赋值。

替换的方法

getDerivedStateFromProps

class Example extends React.Component {   
    static getDerivedStateFromProps(nextProps, prevState) { 
        if(nextProps.name !== prevState.name) {
            return {
                name: nextProps.name
            }
        }
    } 
}

getSnapshotBeforeUpdate

触发的时机在最近的更改被提交到DOM元素前，使得组件可以在更改之前获得当前值，此生命周期返回的任意值都会作为第三个参数传给componentDidUpdate。一般当我们需要在更新DOM前需要保存DOM当前的状态时会使用这个生命周期，比较常见是用于DOM更新前获取滚动位置，更新后恢复到该滚动位置。比如上面的案例三，componentWillUpdate更好的替换方案就是getSnapshotBeforeUpdate，getSnapshotBeforeUpdate到componentDidUpdate只经过了更新DOM这一操作。