React Native 初探,了解React Native基本特点,优点和缺点以及适用场景。
为什么需要React Native
拥有Native的用户体验,又保留React的开发效率。
Native 的优势:更好的人机交互体验
- 原生控件有更好的体验
- 有更好的手势识别
- 更合适的多线程模型
- 更丰富细腻的动画效果
Learn once, write anywher
特点
- React: 在不同平台上使用相同的技术开发
- Virtual DOM: 是DOM在内存中的一种轻量级表达方式,可以通过不同的渲染引擎生成不同平台下的UI。
- 无需编译:第一次编译安装后,只需更新服务器端的JS代码,reload一下,整个界面就会同步是更新。
- JSX: 标签化的XML,学习成本低,降低代码量
- css-layout: 可使用css编写布局
- OC-JS: 通过事件机制OC单向调用JS,JS可以直接调用原生的UI,可以运行在Chrome中,通过websocket连接Native code方便调试。
- 点按操作抽象成组件:方便控制整个点按操作过程
- 实时预览,调试方便:Chrome 中断点调试
- 不用webview,彻底摆脱webview的交互和性能问题
- 扩展性强,js可以自由组合使用Native端提供的基本控件
- 可使用原生的动画
- 可通过远端更新JS,直接升级APP
劣势
- 扩展性远不如Web
- 依赖原生组件暴露出来的方法,IOS和Andorid必须写两套不同的UI组件,强烈依赖react native提供的接口;
- 还没有发布1.0版本
重要概念
React Native 中没有Webview, 不是Hybrid App
核心:IOS Native Code 提供十来个最核心的类或组件,然后由React Native的JS部分组成二十来个基本组件,交由上层的业务方来使用。
JS工程师与Native Code工程师的配合
- JS工程师:将基于的组件拼装成可用的React组件
- Native Code工程师:提供核心组件,提供足够的扩展性、灵活性和性能。
React Native通信机制
大致流程如此:JS函数调用传ModuleID,MethodID -> callback传CallbackID -> OC根据ID拿到对应的方法 -> 处理参数类型 -> 执行OC方法 -> 回调CallbackID -> JS通过CallbackID拿到Callback执行
React Native框架和传统的Hybird的主要区别
JS不能直接调用OS,只有在Native界面事件响应中去调用JS
过程:事件发生时,OC调用JS,执行JS相应的模块处理,JS将对OC的调用信息加入到消息队列,OC收到消息调用列表中的消息,获取对应的模块方法运行。
在这个过程中,JS充当了数据源的角色,OC是控制器,调用JS数据源并进行解析,然后映射到对应的OC模块进行处理。
解析React Native内部通讯机制
一个资深iOS开发者对于React Native的看法
走出温室,世界才刚刚开始。
React 技术方案
React支持服务端渲染
首屏服务端渲染,翻页客户端渲染
可以集成到现有的APP
缓存用于解决资源二次访问时的加载性能、打包解决资源首页访问时的加载性能