問題描述:

現象：父組件（容器組件）把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()函數

react生命周期遇到的問題