React Native compnent reuse

2018/03/24

Tags: react react-native

做功能的时候,一般我们会适当的封装一些组件出来共享,这样好管理和维护,这个大家估计都会这么做。有时候手机上面因为屏幕小,填一些表单的时候,会需要到另外一个页面去维护选择一些内容,那这个页面是页面还是组件呢?

我总结下来,所有需要填写的页面,都应该按照组件的思维来封。因为他们实际上很可能会被多次复用,一个路径上面可能会出现多次。当然,普通页面也可能会出现多次,出现多次的展示页面如果是相同的内容,那 store 里面用一个按说也没问题,如果是不同的内容,那应该会有一个 id 来区分不同的内容,这个时候 store 里面存一个用这个 id 做 key 的 map 就可以了。

继续说填写页面。比如我们的新建订单的页面,会有两个入口,一个是全新的,一个是从历史订单复制的。从历史订单复制的,就需要在 store 里面先把已有的数据放一份,再进入新建页面,如果用户点了返回按键,还需要把 store 里面的状态清掉,否则下次进入的时候还会有出来上次的数据。

如果按照组件的思维封装,那数据入口只有 props,store 里面不会有,就不用考虑清数据的问题。至于返回的数据,根据页面情况,一般是有两个途径,一个是需要把数据返回给上一个页面的,一个是直接把数据通过网络请求发送的。对于第一个,可以通过 callback 方法给上一个页面,对于第二个,通过 action 来做就可以了。

我们需要把页面里面的数据区分一下 private 数据和 public 数据。对于 private 数据每次使用基本不一样,通过 props 传递进来。而 public 数据基本是相同的,那通过 store 存下来,必要的时候更新就可以了。

我们使用的是 reac-navigation,使用的时候,可以通过 navigate('newPage', {prop1: 'prop1 value', callback: func1}) 这种方法来把数据和 callback 方法传递过去。那个页面处理完毕之后,通过 callback 把数据返回来。这样就不用费力把数据通过 action -> reducer -> selector 传到上一个页面了,并且页面再次使用也不用操心上一次使用的时候的残留数据了,页面被复用也不会互相干扰。

Comments