在React中,資料都大體上都是單向資料流動的,由父節點傳到子節點,子元件都是通過Props從父元件那裡擷取資料,這樣的話,如果很多子元件用了資料隻需要改變父元件的資料子元件的資料都會發生改變react就會遞歸重新渲染整個組建。這樣子元件就簡單而且易于把握了。
大部分資料都是父傳子,就不詳寫了。 但是偶爾向日期元件,input,select元件,等等子元件,父元件都是需要通過子元件傳來的資料進行判斷的。這個時候就需要逆向傳遞資料了。
解決問題的方法
1.在工作中就直接由父元件向子元件傳遞(帶參)函數
2.當需要在子元件裡面進行值的變化傳遞給父元件的時候,把需要傳遞的值(json,數組都能傳 等等)作為入參給函數。
例如:
父元件裡面
onInput(tag, e) {
Console.Log(tag); //擷取子元件傳過來的第一組值 (因為可以轉json,Array傳的資料不少是以我用組形容)
Console.Log(e); //擷取子元件穿過來的第二組值
}
<InputComponent callback={this.onInput.bind(this)} }/> //在render裡面調用這個
子元件裡面
this.props.callback(this.props.tag, val); //通過props調用父元件的函數,然後通過這個實參去給父元件傳遞值
初期編碼的一些互動并不複雜,React的單向資料流有優點也同時有缺點。 後續的父子元件之間的資料傳遞更為複雜,或者說子元件與子元件之間的資料流動這都會導緻這種方式僅僅能解決一些簡單的資料流。
我在做微信支付服務商物料管理的時候涉及儲存頁面的數值狀态,在跳轉頁面的同時要儲存目前的資料。這種用react雖然也能實作。但每次儲存狀态的方式都非常的不優雅。 後面看了Flux思想,确實能解決資料比較複雜的情況,而redux架構是其中的佼佼者。(Facebook Flux其中store和Dispatcher和action之間存在多對多,并且以廣播的形式進行傳遞資訊,不優雅。 reflux比較好用采用了監聽的方式比較不錯)如果感興趣可以看看相關的部落格進行了解。