react、redux個人學習筆記

react、redux個人學習筆記

reactredux個人學習筆記 State Actions與Reducer React組件生命週期 React組件內的state 瀏覽器控制台snapshot

本文記錄了個人在學習過程中爬過的坑，僅供參考，大牛繞道，若有說的不對的地方歡迎批評指正，希望能幫到一些和我一樣剛剛開始學習React的新手。 State、 Actions與Reducer

使用react與redux相結合的架構構造項目的時候，其核心無非就是store, actions與reducer三者相結合。核心思想非常好理解，store中的state用於儲存資料以控制組件的狀態，而組件所涉及的各種行為稱為actions，但actions只是一個含有type屬性和相應資料的JSON對象，並不處理資料，只是起到一個命令的作用。當某個action被dispatch調用後會根據action中的type屬性值在reducer裡尋找對應項，真正對資料進行操作的是reducer，然後reducer將action中攜帶的資料進行一定處理後更新到store的state中，而當state一旦發生改變，React中的diff演算法會根據state的改變部分對相應組件進行最小程度的重新渲染。 React組件生命週期

這張圖片很好的顯示了React組件的生命週期，瞭解並牢記各個生命週期的執行順序和觸發條件的重要性我就不強調了。

值得一提的是componentWillReceiveProps這個環節，在該組件第一次被渲染的時候，該方法並不會被調用，而在第一次渲染之後props發生改變之後才會觸發該函數。另外，當調用該組件的父組件觸發render的時候，父組件中所有的子組件都會觸發一次componentWillReceiveProps方法，即使其發生改變的state與某個子組件沒有任何關係。因此，當你想在父組件中state添加某個值的時候，一定要三思而後行，可能會導致子組件意外的觸發componentWillReceiveProps方法。 React組件內的state

除了store中的state外，各個組件也有自己的state，用於控制組件自身的狀態，切勿將兩個state弄混淆。需要注意的是，組件內調用this.setState(newState)之後，newState會被加入到一個隊列中（如下圖所示），不會立即執行更新，而是會觸發一個判斷條件來判斷是否需要馬上更新。所以當你調用this.setState(newState)之後，馬上從state中拿值很可能是拿不到newState的。而且在對state中同一個值進行連續賦值的時候，state並不會重複更新，而是只會直接將相應的值更新為最後一次賦值結果。
瀏覽器控制台snapshot

關於資料傳遞，必須要提的是我在初學React時遇到的一個坑，就是當父組件通過props向子組件傳遞參考型別資料的時候，在子組件的constructor，componentWillMount等方法中拿不到this.props.data的值，而其它的如Boolean、String、Number類型資料能夠正常擷取。

constructor(props) { super(props); console.log(this); console.log(this.props.contentData);}

如上方代碼，在Table組件中constructor方法裡用控制台分別列印 this 和 this.props.data：

我們發現this.props.data是個空數組，然後再查看Table中的props：

我們發現Table裡的props中的contentData卻是拿到了的。為什麼會出現這種前後不一致的情況呢。這個奇怪的現象其實是由兩個原因導致的，第一個原因是因為chrome瀏覽器控制台在記錄某個具有多層次的資料結構時，其實記錄下來的只是該資料結構的一個快照（snapshot），意思是指控制台在執行記錄時，其實只記錄了這個資料結構的最表面一層，而當你之後再去查看內層資料的時候，內層資料的值才會被擷取，也就是說你現在看到的內層資料的值都不是執行console.log代碼的那一瞬間的值，而是你在控制台查看內層資料的這一時刻的值。而控制台僅僅只在執行代碼的瞬間記錄下一個快照的目的是為了讓控制台最小程度的影響程式碼的執行，而一次性記錄下整個複雜的資料結構則會損失一部分效率。

To be continued…