React Native 傳參的五種方式

cnTomato 發布于2019-08-26 13:52 / 2048人閱讀

摘要：在中由于業務的需要我們往往要在諸多的頁面間，組件之間做一些參數的傳遞與管理在這里我總結了幾大經過驗證，穩定好用的方式給大家導航傳值推薦指數適用范圍相鄰頁面間傳值兼容性原理為頁面的上掛載了對象可用來做路由跳轉，在做頁面跳轉時可以攜帶參數回調方

在React Native 中由于業務的需要, 我們往往要在諸多的頁面間，組件之間做一些參數的傳遞與管理, 在這里我總結了幾大經過驗證，穩定好用的方式給大家

React Navigation 導航傳值

推薦指數: ? ? ? ? ?
適用范圍: 相鄰頁面間傳值
兼容性: IOS/Android
原理: React Navigation 為頁面的 props 上掛載了 navigation 對象, 可用來做路由跳轉，在做頁面跳轉時可以攜帶參數/回調方法前往目標頁面，從而達到傳參的目的
說明: 這是官方推薦，也是我們在業務開發中用得最多，最為推崇的一種傳參方式, 思想與 web 在 querystring 上帶參跳轉類似，只是實現方式略微不同, 舉例：

 導航傳值即可正向傳值，也可反向傳值 例如 A->B 是正向傳值， 而B->A 則是反向傳值
 正向傳值：
  A頁面跳轉向B頁面, 在組件內通過訪問 this.props.navigation.navigate("B", { 
   type: "list",         
   callback：data => { console.log("data in callback: ", data); }
  });
  
 在B頁面 就能在組件的生命周期函數中拿到值
  componentWillMount() {
    const { state: { params: { type, callback }, goBack }} = this.props.navigation;
    console.log("type: ", type);
    // type "list"
  }

 反向傳值： 在反回前一個頁面時, 手動調用callback，并給其傳參, 再調用 goBack 方法， 即可達到目的。
 還是上面的例子:
 當從B返回A的時候
 goBackToPageA: () => {
    const { state: { params: { type, callback }, goBack }} = this.props.navigation;
    callback({ id: "123", message: type + " really?"});
    goBack();
 }
 goBackToPageA();

 回到A頁面后
 "data in callback: ", { id: "123", message: "list really?"});
 也即callBack 中的 data 參數就是 { id: "123", message: "list really?"}

DeviceEventEmitter 觸發事件并傳值

推薦指數: ? ? ? ?
適用范圍: 頁面間傳值/組件間傳值
兼容性: IOS/Android
原理: 利用 React Native 包中提供的 DeviceEventEmitter 模塊訂閱事件，觸發事件，同時傳值
說明: DeviceEventEmitter 從名字就能知道他是基于事件訂閱的機制來進行傳值的, 當訂閱某種事件后，觸發的時候會調用訂閱事件的回調, 并能把值傳送過去, 并且在同頁面內的組間件，不同頁面間都可以傳值, 但前提是頁面還未被銷毀(銷毀后事件的訂閱會取消), 例如:

  DeviceEventEmitter.addListener("warning_event", (data) => { console.log("data: ", data);})
  DeviceEventEmitter.emit("warning_event", { name: "Mega Galaxy"});
  //  data: { name: "Mega Galaxy" }

  在emit(觸發)事件后, 回調函數的入參就變成了我們所傳遞的 { name: "Mega Galaxy"}, 
  也可不傳值,不傳值時 callback 的入參就是 undefined

缺點: 本質是對自定義事件的監聽與觸發，當頁面邏輯復雜時，代碼量會增多，維護成本變高，且監聽過多會造成性能問題，還有一點就是在頁面銷毀時必須移除監聽: 如果忘記移除監聽會怎么樣? 那每當 emit 事件一次，就會多響應一次你加上去的監聽

componentDidMount() {
    this.eventHandler = DeviceEventEmitter.addListner("event_name", callback);
}
componentWillUnmount() {
    this.eventHandler.remove();
}

個人建議: 在梳理清楚頁面邏輯后，合理使用

AsyncStorage Key-Value 式的存儲傳參

推薦指數: ? ? ? ?
適用范圍: 跨頁面跨組件的任性傳參
兼容性: IOS/Android
原理: 利用類似 web 中 localStorage 的思想，將參數/數據存放在 AsyncStorage中，在需要的地方再取出來
說明: localStorage 在 web 中的實用性與受歡迎程度大家是知道的， AsyncStorage其實就是 rn 版的 localStorage, 略微不同的是它是異步的，只返回 Promise, 所以與 async/await 結合會非常好用

···

在A頁面
saveOrderData = async () => {
  try {
    const orderData = [{ id: 1, data: []}, { id: 2, data: []}]
    await AsyncStorage.setItem("Order_data_cache", JSON.stringify(orderData ));
  } catch (error) {
    // Error saving data
  }
}

在B頁面
loadOrderData = async () => {
  const __orderData = await AsyncStorage.getItem("Order_data_cache");
  const orderData = JSON.parse(__orderData);
  this.setState({ orderData });
}

缺點: 以 Key-Value 式的存儲傳參，可能重點還是在數據存儲上, 且因為涉及到 I/O 的操作，在部份低端機型上，有卡頓的可能性

React Context Api 傳參(新版Context Api)

推薦指數: ? ? ?
適用范圍: 不同頁面內的組件共享公共類的數據
兼容性: IOS/Android
原理: 利用生成的數據倉庫包裹父級組件, 再從子組件中獲取數據倉庫中的數據
說明: Context Api 在管理登錄用戶數據這類具有公共屬性的數據是一把利器，但使用起來會相當繁瑣

  const ContextWrapper = React.createContext();
  
  
  // 注意這里的  是指我們 App的根組件，在包裹根組件后 我們可以在任意子頁面組件 中取值

  任意  里的子頁面組件中

   
    { context =>  { context.name } { context.job } }
  
  會渲染成  Mega Galaxy FrontEnd Engineer

缺點: 理解需要花一些功夫, 寫法繁瑣，且只適合特定類型的數據，要明確組件間的包裹關系

Global 傳值

推薦指數: ? ? ?
適用范圍: 頁面間傳值（全局任意頁面）
兼容性: IOS/Android
原理: 利用 Node.js 中的頂級對象 -- Global. 來掛載屬性, 利用屬性傳值
說明: 在跳轉的頁面前，可以把需要傳遞的參數掛載在 Global 對象上, 在跳轉后即可在 Global 對象上訪問鍵取到對應的值, 例如:

在 A 頁面：
    Global.params = { name: "Jalon", id: "123456"}, 
跳轉任意頁面后：
    Global.params // { name: "Jalon", id: "123456"}

除了字值串,布爾值,對象 和 數組, 也可以傳遞函數, 
如果傳遞的函數有引用組件上下文環境的變量，注意解耦，否則可能會報錯.

缺點: 如果掛載的屬性/方法過多易造成沖突與污染, 不利于維護
個人建議: 在 react-navigation 跳轉傳值與 DeviceEventEmitter 維護不方便的情況下才使用, 但盡量少用, 以免造成全局屬性的污染與沖突

總結了5種常見的參數/數據傳遞的方法，以個人角度來看，推薦順序為 React Navigation 導航傳值 > DeviceEventEmitter 觸發事件并傳值 > AsyncStorage Key-Value 式的存儲傳參, 最后兩種是在特殊場景下才會去使用，所以在合適的場景去選擇合適的方式傳值，會為React Native項目的開發帶來事半功倍的效果．

云服務器 GPU云服務器下的五種負載均衡的五種策略 React Native webrtc react native

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109704.html

2017-07-18 前端日報

摘要：前端日報精選常用實例的實現與封裝實現一個構建基于的可擴展應用規范翻譯從到中文開源中國兩級緩存實踐掘金中基于的自動實體類構建與接口文檔生成某熊的全棧之路繼承總結教程中的五種組件形式掘金再說的問題前端開發前端每周清單第期正式 2017-07-18 前端日報精選 javascript常用實例的實現與封裝實現一個 SwiperRekit 2.0 構建基于React+Redux+React-r...

lauren_liuling 2019-08-21 16:01 評論0 收藏0
Flow - JS靜態類型檢查工具

摘要：介紹是個的靜態類型檢查工具，由出品的開源碼項目，問世只有一年多，是個相當年輕的項目。現在，提供了另一個新的選項，它是一種強靜態類型的輔助檢查工具。 showImg(https://segmentfault.com/img/bVH6mL?w=1200&h=675); 本章的目標是提供一些Flow工具的介紹與使用建議。Flow本質上也只是個檢查工具，它并不會自動修正代碼中的錯誤，也不會強制...

seanHai 2019-08-20 13:39 評論0 收藏0
手挽手帶你學React：三檔 React-router4.x的使用

摘要：我們在內部來渲染不同的組件我們這里采用哈希路由的方式，鑒于的渲染機制，我們需要把值綁定進入內部。手挽手帶你學React入門三檔,帶你學會使用Reacr-router4.x,開始創建屬于你的React項目什么是React-router React Router 是一個基于 React 之上的強大路由庫，它可以讓你向應用中快速地添加視圖和數據流，同時保持頁面與 URL 間的同步。通俗一...

SunZhaopeng 2019-08-23 15:11 評論0 收藏0
初識React(8)：父子組件傳參

摘要：父級向子級傳參父子組件通信主要用到，如下在父組件中父組件我是父級過來的內容在子組件中子組件通過上面例子可以看出，在父組件中，我們引入子組件，通過給子組件添加屬性，來起到傳參的作用，子組件可以通過獲取父組件傳過來的參數子級向父級傳參在父組件中父級向子級傳參父子組件通信主要用到props，如下：在父組件中： import React from react import ChildCo...

paulli3 2019-08-23 11:48 評論0 收藏0
組織優化云計算使用的五種方式

摘要：根據市場研究機構科技商業研究公司的調查年公共云計算的市場規模約為億美元。云計算的成本將繼續下降人們可能已經知道云計算的性能變得越來越好。畢竟絕大多數云計算使用案例仍然是基礎設施即服務。如今,IT行業人士都知道一個道理:當談到云計算和數據中心的發展趨勢時,沒有現狀這一說法,因為其發展不是每年或每月的變化,它們似乎每分鐘都在發生變化。根據市場研究機構科技商業研究(TBR) 公司的調查,2010年...

rottengeek 2019-04-30 11:32 評論0 收藏0