1. 程式人生 > >React 的資料流動(反向由子元件向父元件傳遞資料)

React 的資料流動(反向由子元件向父元件傳遞資料)

在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比較好用採用了監聽的方式比較不錯)如果感興趣可以看看相關的部落格進行了解。