React Native 初探

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内部通讯机制

React Native通信机制详解

一个资深iOS开发者对于React Native的看法
走出温室,世界才刚刚开始。

React 技术方案

React支持服务端渲染

首屏服务端渲染,翻页客户端渲染

可以集成到现有的APP

缓存用于解决资源二次访问时的加载性能、打包解决资源首页访问时的加载性能