Reactive-Native框架的简单尝试(Part I)

从Reactive-Native的名字说起
字面意思,Reactive响应式,Native原生。就如JSPatch下发热更新修复线上问题,本质上还是利用OC的runtime特性,把JS解析并注入运行时,比如在class中加属性就是改变对象模型的offset,加方法就是在method list中增加对应的selector并映射到相关的method,改变方法Method Swizzling等等,总之runtime能做的事情,解析这段JS文件以后也可以执行,和原生的代码一样的性能,而不是在webview中去渲染,体验更佳流畅,这就是Native。经过FB大神们的封装,JS的写法不再是原生的JS,而是和React如出一辙(http://reactjs.cn/react/index.html),这就是Reactive。

接下来我们来试一下官方的几个basic demo
安装,自己看,要哪些东西(https://facebook.github.io/react-native/docs/getting-started.html)注意执行,react-native run-ios的时候,如果闪退,检查下网络配置,因为本地会有node.js的服务,全局代理冲突了会无法访问。
写一个hello world,文档(https://facebook.github.io/react-native/docs/tutorial.html)import, from, class, extends, and the () => 这些语法都是ES2015标准,<Text>Hello world!</Text>就是JSX,XML和嵌入JS的写法,类似于Rails当中的erb文件,嵌入式,<Text>是RN框架封装好的组件,注意RN框架有一些列已经封装好的组件,熟悉他们的特性也就是掌握这个框架的过程。在RN中所有东西都是组件,就算你要新建一个类也必须是extends Component,另外AppRegistry表明是root组件。完成以后cd到项目文件夹下的ios目录,用Xcode打开,看到AppDelegate.m,定位到application:didFinishLaunchingWithOptions:这个方法,在应用打开的时候加载了.js文件,并生成RCTRootView作为root view,看下node.js的server在干什么,浏览器中打开http://localhost:8081/index.ios.bundle,能看到相关的JS代码,由JavaScriptCore framework加载并执行。后来debug中每次cmd+R都是重新加载并执行应用开启时的动作。

再往下看文档你会发现,每一个RN框架中的class其实都继承于Component,而一个组件Component是由props和state控制的,写下这两个概念

Props:大多数组件可以被自定义创建,当然需要不同的初始化参数,这里叫做Props,看到demo(https://facebook.github.io/react-native/docs/props.html#content)<Greeting name=’Rexxar’ />,组件创建需要参数name, 然后在Greeting这个Class中访问这个参数需要从props进入,this.props.name。只在初始化组建的时候使用,不能改变的。

State:Props在组件的生命周期中是固定的,如果组件的状态发生改变,比如输入框输入新的内容,那么我们就要使用state来追踪这些改变。一般情况下,我们在constructor中初始化state,看到https://facebook.github.io/react-native/docs/state.html#content,this.state = {showText: true};,这里的state是个bool值。你可以选择一个状态容器state container比如Redux,但如果之前没有接触过,就会有学习成本,脑中迅速闪过一个个JS大神的名字,哈哈。

界面布局,总体来说,用JS来写,CSS可以嵌套,内容与样式分离和web app一个套路,还有flexbox流式布局等等,用到了就去查看文档和实例吧。简单过一下,TextInput组件,依赖state的改变,每次输入以后自动刷新页面。ScrollView会一次把数据都显示在页面上,没有复用的效果。ListView有点像UITableView可以复用,但也需要Datasource来初始化。网络层使用Mozilla的Fetch框架,你也可以用Ajax,支持WebSocket。有通用的Navigators,也有iOS定制的Navigators,那个页面的堆栈要自己来维护,推入推出操作要手动写,淡然也有现成的东西(https://github.com/react-community/react-navigation)。在iOS10.2的iPhone6上运行官方的demo,我看到那个导航栏在iOS上是看不到的,只是一行text,这种情况也是我担心的风险,OS升级带来的bug,所以RN要更新及时啊~

说了这么多,我们从头到尾写一个业务相关的demo吧,包括login,拿到token,传递token再次发起请求,解析数据,渲染布局等等。开始 继续阅读Reactive-Native框架的简单尝试(Part I)