React的生命週期 和 頁面優化
先上React的生命週期圖
頁面優化問題在 shouldComponentUpdate 函數那裏寫的（有顏色備註）
React聲明週期的四個大階段：
- Initialization:初始化階段。
- Mounting: 掛在階段。
- Updation: 更新階段。
- Unmounting: 銷燬階段。
什麼是生命週期函數
用大神 技術胖 來說就是
生命週期函數指在某一個時刻組件會自動調用執行的函數
階段說明
Initialization指的是初始化過程，這個時候組件會初始化自己的一些數據，比如props，比如state，constructor就是我們初始化的位置，在這裏會定義state，會接收props。 代碼就不上了，大家有興趣可以看看官網文檔 ，也就不過多解釋了
-
1 Mounting 掛載階段
Mounting階段叫掛載階段，伴隨着整個虛擬DOM的生成，它裏邊有三個小的生命週期函數，分別是：
componentWillMount : 在組件即將被掛載到頁面的時刻執行。 render : 頁面state或props發生變化時執行。 componentDidMount : 組件掛載完成時被執行。
執行代碼：
//componentWillMount代碼
componentWillMount(){
console.log('我是componentWillMount--組件將要掛載到頁面的時刻出現')
}
//componentDidMount代碼
componentDidMount(){
console.log('我是componentDidMount--組件掛載完成的時刻執行出現')
}
//render代碼 （必寫）
render(){
console.log('我是render-組件掛載中出現')
}
打印出來的順序是
- componentWillMount
- render
- componentDidMount
注意的問題
componentWillMount和componentDidMount這兩個生命週期函數，只在頁面刷新時執行一次，而render函數是只要有state和props變化就會執行。
-
2 Updation 更新階段
Updation也就是組件發生改變的更新階段，這是React生命週期中比較複雜的一部分，它有兩個基本部分組成，一個是props屬性改變，一個是state狀態改變（這個在生命週期的圖片中可以清楚的看到，props比state 只多了一個componentWillReceiveProps 函數）。執行代碼：
// componentWillReceiveProps 函數
// **注意** 這個是寫在子組件中的 // 因爲頂層組件，它並沒接收任何的props
componentWillReceiveProps(){
//凡是組件都有生命週期函數，所以子組件也是有的，並且子組件接收了props，這時候函數就可以被執行了。
console.log('child - componentWillReceiveProps')
}
子組件接收到父組件傳遞過來的參數，父組件render函數重新被執行，這個生命週期就會被執行。
- 也就是說這個組件第一次存在於Dom中，函數是不會被執行的;
- 如果已經存在於Dom中，函數纔會被執行。
//shouldComponentUpdate函數代碼
//它要求返回一個布爾類型的結果，必須有返回值，這裏就直接返回一個true
shouldComponentUpdate(){
console.log('shouldComponentUpdate---組件發生改變前執行')
return true
}
這裏寫一下shouldComponentUpdate的重要性 也是頁面標題寫的 頁面優化問題
- shouldComponentUpdate函數會在組件更新之前，自動被執行。
- 它要求返回一個布爾類型的結果，必須有返回值，true和false
- 簡單點說，就是返回true，就同意組件更新;返回false,就反對組件更新。
頁面優化問題
在子組件頻繁無用渲染render，這樣項目小的話 看上去沒有問題性能損耗很小，但是當你頁面很複雜時，足以影響用戶體驗，積少成多嘛，性能損耗會增加 頁面會卡頓，肯定會被組長或總監罵死的；
這裏用shouldComponentUpdate 就能解決了
首先你要確認你安裝了谷歌 React Developer Tools 插件，如果你沒有安裝，可以到百度一下安裝。有了這個瀏覽器插件，就可以在控制檯中找到React標籤，然後在右邊點開設置，選中highlight Updates。
這時候你在瀏覽器的文本框中輸入一下內容，你可以清楚的看到子組件也發生了重新render的情況。
代碼如下：
shouldComponentUpdate(){
return false;
}
這時候在瀏覽器中查看，問題已經沒有了。但是這樣做太暴力了，否定了所有的東西，那如果在真實項目中，需要改變值屬性值，達到渲染就沒辦法了
shouldComponentUpdate有兩個參數（相當有用）：
1. nextProps:變化後的屬性;
2. nextState:變化後的狀態;
//示例
shouldComponentUpdate(nextProps,nextState){
//content 父傳過來的數據 可以按自己項目需求寫
if(nextProps.content !== this.props.content){
return true
}else{
return false
}
}
這樣就解決了子組件的渲染性能問題
我們接着說 Updation 後面的倆個函數 componentWillUpdate和componentDidUpdate
componentWillUpdate在組件更新之前，但shouldComponenUpdate之後被執行。但是如果shouldComponentUpdate返回false，這個函數就不會被執行了。
//componentWillUpdate函數 代碼
//shouldComponentUpdate返回true纔會被執行。
componentWillUpdate(){
console.log('componentWillUpdate---組件更新前，shouldComponentUpdate函數之後執行')
}
//componentDidUpdate函數 代碼
//componentDidUpdate在組件更新之後執行，它是組件更新的最後一個環節。
componentDidUpdate(){
console.log('componentDidUpdate----組件更新之後執行')
}
打印出來的順序是
- 1、shouldComponentUpdate
- 2、componentWillUpdate
- 3、render
- 4、componentDidUpdate
- 3 Unmounting 銷燬階段
把最後一個React的生命週期函數講一下，這個生命週期周期函數就是componentWillUnmount，它是在組件去除時執行。
這個函數時組件從頁面中刪除的時候執行 (子組件)
//當組件從頁面中刪除的時候執行
componentWillUnmount(){
console.log('child - componentWillUnmount')
}
。
。
。
。
。
。
。
。
這裏好多都是聽大神 技術胖講的 自己整理的 ，有興趣的朋友去看看