談談React--componentWillReceiveProps的使用

什麼是componentWillReceiveProps？

componentWillReceiveProps是React生命週期中的一個環節，有關React的生命週期，同學們可以在這裡詳細瞭解。

componentWillReceiveProps在初始化render的時候不會執行，它會在Component接受到新的狀態(Props)時被觸發，一般用於父元件狀態更新時子元件的重新渲染。這個東西十分好用，但是一旦用錯也會造成十分嚴重的後果。

在componentWillReceiveProps這個回撥函式中，我們可以獲取到就是props，通過this.props來獲取，然後新的props則是通過函式的引數傳入，在這裡我們可以比較兩個props從而對本元件的state作出安全的變更然後重新渲染我們的元件或者是觸發子元件內的某些方法。

//這種方式十分適合父子元件的互動，通常是父元件需要通過某些狀態控制子元件渲染亦或銷燬...

componentWillReceiveProps(nextProps) {//componentWillReceiveProps方法中第一個引數代表即將傳入的新的Props
    if (this.props.sharecard_show !== nextProps.sharecard_show){
        //在這裡我們仍可以通過this.props來獲取舊的外部狀態
        //通過新舊狀態的對比，來決定是否進行其他方法
        if (nextProps.sharecard_show){
            this.handleGetCard();
        }
    }
}
複製程式碼

上面是componentWillReceiveProps常用的方式，但是如果使用不當可能會導致以下後果，一般體現為元件陷入渲染死迴圈，他會一直接受新的外部狀態導致自身一直在重渲染。

componentWillReceiveProps(nextProps) {
    if (this.props.sharecard_show !== nextProps.sharecard_show){
        if (nextProps.sharecard_show){
            this.handleGetCard();
        }
    }
}

handleGetCard() {
    this.props.test()
}

//父元件內

test() {
    this.setState({
        sharecard_show: !this.state.sharecard_show
    })
}
複製程式碼

一旦專案中出現這樣的程式碼，有很大機率就會陷入死迴圈，這兩個元件會一直在傳遞狀態並且重新渲染，然後頁面估計就卡掛了。這是其中一個需要注意的地方，另外我們需要謹記，在componentWillReceiveProps中想作任何變更最好都將兩個狀態進行比較，假如狀態有異才執行下一步。不然容易造成元件的多次渲染，並且這些渲染都是沒有意義的。