摘要：在中由于業(yè)務(wù)的需要我們往往要在諸多的頁(yè)面間，組件之間做一些參數(shù)的傳遞與管理在這里我總結(jié)了幾大經(jīng)過(guò)驗(yàn)證，穩(wěn)定好用的方式給大家導(dǎo)航傳值推薦指數(shù)適用范圍相鄰頁(yè)面間傳值兼容性原理為頁(yè)面的上掛載了對(duì)象可用來(lái)做路由跳轉(zhuǎn)，在做頁(yè)面跳轉(zhuǎn)時(shí)可以攜帶參數(shù)回調(diào)方

在React Native 中由于業(yè)務(wù)的需要, 我們往往要在諸多的頁(yè)面間，組件之間做一些參數(shù)的傳遞與管理, 在這里我總結(jié)了幾大經(jīng)過(guò)驗(yàn)證，穩(wěn)定好用的方式給大家

推薦指數(shù): ? ? ? ? ?
適用范圍: 相鄰頁(yè)面間傳值
兼容性: IOS/Android
原理: React Navigation 為頁(yè)面的 props 上掛載了 navigation 對(duì)象, 可用來(lái)做路由跳轉(zhuǎn)，在做頁(yè)面跳轉(zhuǎn)時(shí)可以攜帶參數(shù)/回調(diào)方法前往目標(biāo)頁(yè)面， 從而達(dá)到傳參的目的
說(shuō)明: 這是官方推薦，也是我們?cè)跇I(yè)務(wù)開(kāi)發(fā)中用得最多，最為推崇的一種傳參方式, 思想與 web 在 querystring 上帶參跳轉(zhuǎn)類(lèi)似，只是實(shí)現(xiàn)方式略微不同, 舉例：

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

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

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

推薦指數(shù): ? ? ? ?
適用范圍: 頁(yè)面間傳值/組件間傳值
兼容性: IOS/Android
原理: 利用 React Native 包中提供的 DeviceEventEmitter 模塊訂閱事件，觸發(fā)事件，同時(shí)傳值
說(shuō)明: DeviceEventEmitter 從名字就能知道他是基于事件訂閱的機(jī)制來(lái)進(jìn)行傳值的, 當(dāng)訂閱某種事件后， 觸發(fā)的時(shí)候會(huì)調(diào)用訂閱事件的回調(diào), 并能把值傳送過(guò)去, 并且在同頁(yè)面內(nèi)的組間件， 不同頁(yè)面間都可以傳值, 但前提是頁(yè)面還未被銷(xiāo)毀(銷(xiāo)毀后事件的訂閱會(huì)取消), 例如:

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

  在emit(觸發(fā))事件后, 回調(diào)函數(shù)的入?yún)⒕妥兂闪宋覀兯鶄鬟f的 { name: "Mega Galaxy"}, 
  也可不傳值,不傳值時(shí) callback 的入?yún)⒕褪?undefined

缺點(diǎn): 本質(zhì)是對(duì)自定義事件的監(jiān)聽(tīng)與觸發(fā)， 當(dāng)頁(yè)面邏輯復(fù)雜時(shí)，代碼量會(huì)增多， 維護(hù)成本變高， 且監(jiān)聽(tīng)過(guò)多會(huì)造成性能問(wèn)題， 還有一點(diǎn)就是在頁(yè)面銷(xiāo)毀時(shí)必須移除監(jiān)聽(tīng): 如果忘記移除監(jiān)聽(tīng)會(huì)怎么樣? 那每當(dāng) emit 事件一次， 就會(huì)多響應(yīng)一次你加上去的監(jiān)聽(tīng)

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

個(gè)人建議: 在梳理清楚頁(yè)面邏輯后，合理使用

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

···

在A頁(yè)面
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頁(yè)面
loadOrderData = async () => {
  const __orderData = await AsyncStorage.getItem("Order_data_cache");
  const orderData = JSON.parse(__orderData);
  this.setState({ orderData });
}

缺點(diǎn): 以 Key-Value 式的存儲(chǔ)傳參，可能重點(diǎn)還是在數(shù)據(jù)存儲(chǔ)上, 且因?yàn)樯婕暗?I/O 的操作，在部份低端機(jī)型上，有卡頓的可能性

推薦指數(shù): ? ? ?
適用范圍: 不同頁(yè)面內(nèi)的組件共享公共類(lèi)的數(shù)據(jù)
兼容性: IOS/Android
原理: 利用生成的數(shù)據(jù)倉(cāng)庫(kù)包裹父級(jí)組件, 再?gòu)淖咏M件中獲取數(shù)據(jù)倉(cāng)庫(kù)中的數(shù)據(jù)
說(shuō)明: Context Api 在管理登錄用戶數(shù)據(jù)這類(lèi)具有公共屬性的數(shù)據(jù)是一把利器， 但使用起來(lái)會(huì)相當(dāng)繁瑣

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

  任意  里的子頁(yè)面組件中

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

缺點(diǎn): 理解需要花一些功夫, 寫(xiě)法繁瑣，且只適合特定類(lèi)型的數(shù)據(jù)，要明確組件間的包裹關(guān)系

推薦指數(shù): ? ? ?
適用范圍: 頁(yè)面間傳值（全局任意頁(yè)面）
兼容性: IOS/Android
原理: 利用 Node.js 中的頂級(jí)對(duì)象 -- Global. 來(lái)掛載屬性, 利用屬性傳值
說(shuō)明: 在跳轉(zhuǎn)的頁(yè)面前，可以把需要傳遞的參數(shù)掛載在 Global 對(duì)象上, 在跳轉(zhuǎn)后即可在 Global 對(duì)象上訪問(wèn)鍵取到對(duì)應(yīng)的值, 例如:

在 A 頁(yè)面：
    Global.params = { name: "Jalon", id: "123456"}, 
跳轉(zhuǎn)任意頁(yè)面后：
    Global.params // { name: "Jalon", id: "123456"}

除了字值串,布爾值,對(duì)象 和 數(shù)組, 也可以傳遞函數(shù), 
如果傳遞的函數(shù)有引用組件上下文環(huán)境的變量，注意解耦，否則可能會(huì)報(bào)錯(cuò). 

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

總結(jié)了5種常見(jiàn)的參數(shù)/數(shù)據(jù)傳遞的方法，以個(gè)人角度來(lái)看， 推薦順序?yàn)? React Navigation 導(dǎo)航傳值 > DeviceEventEmitter 觸發(fā)事件并傳值 > AsyncStorage Key-Value 式的存儲(chǔ)傳參, 最后 兩種是在特殊場(chǎng)景下才會(huì)去使用，所以在合適的場(chǎng)景去選擇合適的方式傳值，會(huì)為React Native項(xiàng)目的開(kāi)發(fā)帶來(lái)事半功倍的效果．