React Native 传参的五种体式格局

2019年9月1日 201次阅读 来源: 跨越银河Galaxy

在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();
  <ContextWrapper.Provider value={{ name: 'Mega Galaxy', job: 'FrontEnd Engineer' }}
    <App />
  <ContextWrapper.Provider>
  // 注重这里的 <App /> 是指我们 App的根组件，在包裹根组件后 我们能够在恣意子页面组件 中取值

  恣意 <App /> 里的子页面组件中

  <ContextWrapper.Counsumer> 
    { context => <Text> { context.name } { context.job }</Text> }
  </ContextWrapper.Counsumer>
  会渲染成 <Text> Mega Galaxy FrontEnd Engineer </Text>

瑕玷: 明白须要花一些工夫, 写法烦琐，且只适宜特定范例的数据，要明白组件间的包裹关联

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项目标开辟带来事半功倍的结果．

    原文作者：跨越银河Galaxy
    原文地址: https://segmentfault.com/a/1190000019241891
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞