Your time is limited,
so don't waste it living someone else's life.

新的征程——React Native

本月18日,就是这么巧,是我农历生日的那一天,到公司另外一个项目部进行了一个简单的面试,虽然面试表现很水,但是领导放我进React Native项目团队了。

第一天在公司下代码装依赖,但是怎么装都装不好,怀疑是网络问题,后面回到家一装就装好了,但是还是跑不起来,第二天发现好像还有些东西必须是要在公司网络里才能下载,当然下了也还是没在ios模拟器上跑起来,后来在两个同事的帮助下终于是跑了起来。

第二天下午和第三天(也就是今天),一直在看项目代码,边看代码边查文档。果然是每次跟同行接触都有新的收获。这两天把flow(静态类型检查工具)和redux的官方文档大概读了一遍,flow是第一次接触,redux因为以前其实已经看过很多遍了只是一直没用到看了又都忘了,所以这次看起来很顺利。React Native的文档内容有点多,只能边看代码边看文档慢慢来。

flow这个东西,感觉就算是不具备自动检测能力,仅仅作为一种类型注释来给开发者“阅读”,效果也是不错的。

redux+react-redux

大体的流程可以这么说:

  • 如果用“做什么”来打比方,action就是“什么”,dispatch就是“做”,只有“做”了才是真真实实地发生了点“什么”;
  • 但是程序不知道你的action对象是干嘛的,你需要解释,reducer的作用就是解释什么action会产生什么样的新state(不能修改旧state);
  • redux暴露了一个combineReducers方法,可以用来将多个reducer进行合并(根reducer只能有一个,只能是一颗reducer主树上挂很多子reducer);
  • store是核心,把state、action、dispatch、reducer、subscribe等集成在一起,redux提供了一个createStore的方法,store = createStore(one_reducer, initial_state),获取state用store.getState(),派发action用store.dispatch(action);
  • react-redux提供了一个Provider组件,用store属性值为store的Provider组件包含根组件后,就可以在container组件上获取到store;
  • react-redux暴露了一个connect方法,可以通过它将store里的state、dispatch对应到组件的属性props上;
  • 除了很小且样式与功能耦合度较大的组件外,尽量抽出container组件和presentation组件;
  • redux提供了applyMiddleware方法来应用中间件,redux-thunk暴露的中间件可用于创建异步的action。
container组件和presentation组件分开的情况:

container组件和presentation组件不拆开的情况:

关于异步action的代码示例:

index.js:

actions.js

面试的时候,有问到一个问题,switch组件(滑动开关组件)应该用props还是states,领导说是要用states,不过个人觉得应该是用props,因为如果这个组件要是作为第三方组件供他人使用的话,肯定不会取改组件内部的代码的,感觉还是通过props传两个值(一个是表示开关状态的flag,一个是用于修改开关flag的值的函数)比较适合,我vue项目里是这么去弄的,不知道是不是我想错了-_-。

感觉代码还需要再花点时间看,或许慢慢写点简单的可能已经可以了。其实比较怕的是版本控制出错,因为以前都是我一个人的仓库,不怎么会遇到多人协作管理一个仓库的情况。

参考:
  • http://redux.js.org/docs/advanced/AsyncActions.html
赞(0) 打赏(金额可任意指定)
未经允许不得转载:峰间的云 » 新的征程——React Native

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏