如何评价 React Native Android?
我是个 iOS 开发,这两天玩了一下 android,感觉很棒,我们团队目前没有 android 开发,认真考虑换到 react-native 中。
react 本身
首先我想说说 react。react 本身对我的冲击很大,不说 facebook 把这个库推广的怎么样,这是一个思想上的胜利。
过往写 UI 最痛苦的事情在于维护状态,比如一个 boolean 和一个 checkbox 要做到状态统一,那么你就一直在关心他们是不是统一,任何用户操作改变了 checkbox 的状态,触发的 event 里要修改那个 boolean,任何数据操作了这个 boolean,也要去改 checkbox。更不要说数据更复杂,状态更多的时候了。
react 解决了这个问题。他借鉴了游戏 update -> render 的思想,让数据改动和 UI 绘制成为了单向的一个操作。每次 checkbox 的状态,都是在重绘的时候根据 boolean 的值重新画的。
那么问题来了,60fps 的游戏,一秒里画面就被 render 了 60 次,而显示中(比如 iOS)的 UI 是不可能不断 `removeSubview` `addSubview` 的。于是 react 的做法是引入了一个中间层,叫 virtual DOM。boolean 变化后,重新 render 的是这个 virtual DOM,它本质上是一个 object。react 库来维护这个 object 和实际界面(也就是例子里的 checkbox) 的一致。这个 virtual DOM,会在变化后作一个 diff,只有当改变的部分才会影响界面上实际的 checkbox。如果操作很频繁,还有 batch update 来「降低帧数」。
然而正因为有了这个中间层,那么 virtual DOM 下面的表现形式就无所谓了。他可以是传统意义上的 DOM,也可以是 iOS 的各种 UIControl UIView,也可以是 android 的 native 控件,甚至是 webkit 内核本身?(我司 CTO @郭达峰 在 react-europe 上甚至见到了有人直接做了一个命令行的表现层。)
于是 react 就被意料之外、情理之中的 port 到了 native app 的开发领域。
------
react-native for iOS
react-native,下面简称 RN,刚出来的时候,我玩了一下。我司有个面试题,一个小 hangman 的游戏(joycehan/strikingly-interview-test-instructions at new GitHub)。我试着用 RN 写了一个简单的实现(Arthraim/HangmanReact GitHub),还是比较简单的,尤其在维护状态上的思想,真的是太先进,写代码变得容易很多。
第一步,根据 state 和 props 画界面。(比如 someUISwitch.on = someBoolean)
第二步,用户在界面上产生的操作,在各个 event 里修改 state。一旦你更新了 state,RN 就乖乖根据第一步把界面也改到正确的状态了。
RN 最大弊病在于技术栈对 iOS 工程师来说差距太大,权且不说 iOS 工程师本身会不会写个简单的网页,崭新的 ES6,JSX 的学习曲线,也是够陡的,如果还要加上理解 babel, webpack 等等工具,对 iOS 开发,比如我,来说,要学的东西真的太多。对 web 前端的同学来说,那个什么,咳咳,iOS 也是很难学的说。
一大好处是,app 的更新变得方便了,不需要考虑 lua 或者其他的方案,至少某种程度上热补丁变得简单很多。(也已经有人跟上做了个平台了呢 _ https://apphub.io/)
------
react-native for android
这次 RN-android,出来之后,我按照文档配置了一下环境。我本身不是 android 开发,对 android 具体怎么实现它就不清楚了。
我试着把之前 iOS 的那个 demo 给改到 android 来,我发现其实我只做了三件事。
1. 我在原来的项目里执行 react-native android。项目自动加上了 android 的支持。
2. 我把项目里原来主界面的 component,game_ui.ios.js 的文件名改成了 game_ui.js
3. 把 index.android.js 几乎和 index.ios.js 写的一模一样,直接 render 了 GameUI 这个 component。
于是整个 demo 完完整整的在 android 上跑起来了。也就是说,原来 iOS 的代码真的是一行未改,这虽然不是 RN 的卖点(人家不说自己 code once run everywhere 的),但这个副作用诱人,当即我给 CTO 发了 android position 的 application 啊 =。=
考虑到系统差异,实践起来用 react 大一统三个端的话,要不就让 component 自己知道怎么分别绘制三个端。要不就是三个端各自维护一个自己的 component。还没有这么深入的实践,未来看看有没有更深的感悟吧。
------
最后我想说,web 前端世界真是日新月异。有人打趣到,「RN 是前端世界对你们 iOS 开发圈的侵略啊,你们应该抵制才对」。我个人倒是被这种日新月异大大的折服,仿佛 iOS 开发本身都好像显得落后了。拥抱变化。话说如果 react 有个 swift 的实现,我估计会更开心啊。
------
再嗦一个题外话,虽然 react 只解决了 view 的问题,但 facebook 其实提出了 flux 来解决 model 和 controller 存在的问题。针对客户端开发,它还提出了 GraphQL 来解决 flux 里的 store 和传统关系型数据库里 model 之间的矛盾。思想太先进,让我慢慢跟上。
打个小广告,Strikingly 现在是这套思想的践行者,我们整个 web 端已经用 react 重写了一遍。如果你是个前端,欢迎来开发 android 和 iOS,我们也常年招收各种其他职位(Careers at Strikingly),欢迎来战!
查看评论 回复