欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

浅谈React Native 传参的几种方式(小结)

程序员文章站 2022-07-20 11:19:39
在react native 中由于业务的需要, 我们往往要在诸多的页面间,组件之间做一些参数的传递与管理, 在这里我总结了几大经过验证,稳定好用的方式给大家 react...

在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 页面跳转 b 页面时, global.params = { name: 'jalon', id: '123456'}, 在跳转之后, 即可通过 global.params 拿到值, 除了普通的字值串,布尔值,对象,数组, 也可以传递函数, 但要注意带有 this.setstate 方法的函数传递后 调用可能会报错.

缺点: 如果挂载的属性/方法过多 易造成冲突与污染, 不利于维护

个人建议: 在 react-navigation 跳转传值 与 deviceeventemitter 维护不方便的情况下才使用, 但尽量少用, 以免造成 global 属性的污染与冲突

总结了5种常见的参数/数据传递的方法,以个人角度来看, 推荐顺序为 react navigation 导航传值 > deviceeventemitter 触发事件并传值 > asyncstorage key-value 式的存储传参, 最后 两种是在特殊场景下才会去使用,所以朋友们,在合适的场景选择合适的方式去传值,会为react native项目的开发带来更为理想的效果,感谢您的阅读,也希望大家多多支持。