react 通過生命週期優化組件性能

已經對React生命週期有了認識，那如何利用它提高組件的性能那？通過shouldComponentUpdate函數，改善React組件性能的例子。

小姐姐組件存在性能問題

是的，小姐姐組件已經寫的很熟悉了，但是它有一個性能問題，那就是子組件XiaojiejieItem頻繁無用渲染render。如何能看出這個問題的那？

首先你要確認你安裝了React Developer Tools 如果你沒有安裝，可以到前邊的課程學習一下安裝。有了這個瀏覽器插件，就可以在控制檯中找到components標籤，然後在右邊點開設置，選中highlight Updates。


這時候你在瀏覽器的文本框中輸入一下內容，你可以清楚的看到子組件也發生了重新render的情況。

有很多程序員會忽略這樣的性能損耗，認爲沒有什麼大不了的，但是軟件的卡頓是一點點產生的，所以必須要減少性能損耗。

可以在XiaojiejieItem.js的render函數里加入下面的代碼，更直觀的看到這個問題。

    render() { 
        console.log("渲染一次輸出一次") //我們只要輸如一點內容他就會 渲染 嚴重影響性能
        return ( 
            // 點擊事件            this.props.content 子接
        <li onClick = {this.handleClick}>
        {this.props.avname}--爲你服務 : {this.props.content}
        </li>
         );
    }

利用shouldCompontUpdate解決這個問題，一定要進行組件的優化 很重要很重要

shouldComponentUpdate有兩個參數：

• nextProps:變化後的屬性;
• nextState:變化後的狀態;

    // 一定要進行組件的優化 很重要很重要
    shouldComponentUpdate(nextProps,nextState){
        // 將要變化的內容 和 原來的不一樣的時候(有變化渲染 沒變化不渲染)
        if(nextProps.content!==this.props.content){
            return true //去渲染
        }else{
            return false //結束 不渲染
        }
    }