react生命週期遇到的問題

問題描述:

 

現象：父組件（容器組件）把redux管理的值傳給子組件（展現組件），在父組件的render中能讀取到this.props.city.cityName的值，我想把這個值經過props傳到子組件中，可是在子組件中

         render中能拿到所傳的值，componentDidMount中卻沒獲取到，初步估計是生命週期從新渲染方面的問題

 

　　　父組件

　　　　　　　　

 

 

　　　　子組件

　　　　 

 

　　　　顯示

　　　　

 

 

開始分析：

　　

 

 

　　將裝載階段的生命週期函數都打印一遍，看看哪一個環節能獲得值

 

　　結果發現：

　　　　

　　還真的是發生二次渲染，render在第二次得到到了數據，而componentDidMount在react組件整個生命週期只觸發一次，恰好沒機會看見render再一次獲得值了，那麼也難怪得不到值了

 

      那麼又一個問題來了，通常狀況，state發生改變會引發當前組件發生第二次渲染，這裏並無顯性的使用setState改變state，爲何也發生了第二次渲染，呃....

 

　　帶着問題再看一遍react生命週期圖

 

　　                  

　　　發現最左邊的狀況，父組件更新，會引發組件的二次render，並也會觸發當前組件的componenWillReceiveProps()函數

 

　　　寫個demo，驗證一下～，

 

　　　狀況一：  通常狀況

　　　       

 　　

　　　展現

　　   

　　　並無觸發componenWillReceiveProps()函數

 

 

　　   狀況二：此組件狀況

　　　             

　　

　　　展現：

 　　  

 　　  上圖的紅框能夠看出，的確是父級組件的更新致使了，如今這個子組件的二次渲染

 

　　   至於父級組件更新是怎樣的狀況，結合我以前看《深刻淺出React和Redux》寫的博文總結：

　只要是父組件的render函數被調用，在render函數裏面被渲染的子組件就會經歷更新過程，

    無論父組件傳給子組件的props有沒有改變，都會觸發子組件的componentWillReceiveProps函數

　　　

　　   那麼再寫個demo組件進行驗證，加深一下記憶

　　    

 

　　    父級

 　　          引入了子組件

 

　　  子級

　　          

　　

　　效果

 　　

　

      結論：父級初始時調用了render，可是並無再次引發子組件的componentWillReceive觸發，也就沒有引發子組件第二次渲染

 

　　修改父組件代碼，打開父組件setState註釋，經過父組件的state改變，來引發第二次render

　　

 

　　取消註釋，效果：

 

 　　

　　此時父級組件render以後立馬，觸發了子組件的componentWillReceive，並引發子組件第二次render

　　

　　 結論：父級從新調用render（再次重繪），會引發子組件的componentWillReceive觸發

 

　題外總結：子組件自己的state改變或父級的二次渲染，都會引起子組件的二次渲染

　　　

 　  迴歸最原先的父子級組件，又產生了一個問題

 

　　什麼狀況致使父級組件進行第二次render，才致使了子組件二次渲染，才致使了我此次的這個問題，父組件代碼以下

　　

　　展現：

　　

　　父級也被觸發了componentWillReceiveProps，能夠推想出祖父級發生了更新操做

 

　　那麼又引起了一個思考，什麼致使祖父級發生了更新操做，經過一個和此時shop組件同根同級別的組件（這個組件沒有引入redux），顯示那個並無觸發componentWillReceiveProps這個函數推斷，應該shop組件二次渲染可能與redux有關，再次驗證一下：

 

　　註釋了與引入redux相關的代碼

　　

 　　

　　此時，沒有觸發父級和子級componentWillReceiveProps這個函數

　　

 

 　　暫時打住，不繼續「細化」下去了

 

 

　　再作一個總結：

　　第一、引入redux的組件，會引發二次渲染，同時會觸發當前組件的componentWillReceiveProps()函數；

 

　　第二、在父級組件(容器組件)引入了redux，經過props傳值到子組件(展現組件)，由於父組件二次調用render會致使子組件二次調用render，結合下圖，第一次父級的render也沒取到值，顯示的是undefined，第二次父級取到redux中的值就傳到子組件，此時已經沒componentDidMount的機會了，能夠用componentDidUpdate取到

 

　　

 

　　第三、上圖中，有個細節在這裏也特地強調一下，子組件中componentWillReceiveProps，shouldComponentUpdate以及componentWillUpdate

顯示的是undefined並無顯示「杭州」

 

　　查看源代碼，粗略一看，感受沒問題

 

　　         

 

 

　　 結果就....................

 

       

 

 

 

 

　　可是這三個生命週期函數讀取父級的props值比較特殊，他們從參數nextProps中讀取，在這裏須要修一下，才能夠讀取

 

 　　             

 

　　此時展現，父組件傳遞的值成功讀取