記一次react報錯（關於getDerivedStateFromProps）

在使用react16的時候遇到了：
componentWillReceiveProps has been renamed, and is not recommended for use；這個警告。

官方提供的解決方法有：

• 移動到componentDidUpdate
• 移至靜態getDerivedStateFromProps
• 在非嚴格模式下使用UNSAFE_componentWillReceiveProps

使用componentDidUpdate替代componentWillReceiveProp，會有部分場景不適用，需要看情況使用

使用UNSAFE_componentWillReceiveProps，未來react版本升級會導致不可用。

綜上：靜態getDerivedStateFromProps替代componentWillReceiveProp是相對比較合適的方案。

getDerivedStateFromProps

這個生命周期的功能實際上就是將傳入的props映射到state上面。
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和componentWillReceiveProps的區別

當外部多個屬性在很短的時間間隔之內多次變化，就會導致componentWillReceiveProps被多次調用。這個調用並不會被合並，如果這次內容都會觸發異步請求，那么可能會導致多個異步請求阻塞。

reactsetState操作是會通過transaction進行合並的，由此導致的更新過程是batch的，而react中大部分的更新過程的觸發源都是setState，所以render觸發的頻率並不會非常頻繁

參考：https://www.jianshu.com/p/50fe3fb9f7c3