您的位置: 首页  >  文章  >  React Native 技术概览

React Native 技术概览

分类: 文章 • 2023-03-26 21:48:36

一、概览

Native App 性能优越。但是受制于平台，而且多版本维护十分痛苦。因此 Facebook 曾花费大量的人力物力进行移动 HTML5 技术研发，但始终离 Native App 体验有差距。

2012年9月，Facebook 承认 “Betting on HTML5 was a mistake.”。便放弃移动 HTML5，全力转型 Native App 开发。在转型 Native App 开发后，Facebook 内部还在研发一种新的移动技术，并使用这种技术开发内部 App，这个技术便是 React Native。

2015年3月，Facebook 正式公开发布 React Native，并将该技术开源。虽然当时开发平台仅支持 Mac OS，部署也仅支持 iOS 平台。

2015年9月15日，Facebook 发布了 React Native for Android，把 Web 和原生平台的 JavaScript 开发技术扩展到了 Google 的流行移动平台 Android 上。至此，React Native 实现了跨平台的特性。

React.js React Native 二者的联系

  • React.js 是一个用来构建用户界面的 JavaScript 框架
  • React Native 是将 React.js 技术应用到移动端的框架，底层通过桥接 Native Code，结合两者使得开发和使用的体验提升

React Native 与其它移动技术的比较

在 React Native 出现前，我们通常会选择这三种移动技术（Native App、HTML5、Hybrid）之一进行开发。

  • Native App：开发原生应用自然性能最好，功能强大。但多平台版本的开发、维护要花费大量的人力物力。
  • HTML5：虽然有 Web 的优势，即灵活的布局能力、免发版的敏捷迭代潜力、优秀的跨平台特性。在新闻资讯等一些强排版、弱交互的展示类 App 上大展拳脚。但由于 WebView 在移动设备上的性能制约，始终难成大器，这也是 Facebook 放弃其的原因。
  • Hybrid：以 Cordova（PhoneGap）为代表的 Hybrid 方式集 Native App 和 Web 优点于一体，使二者相互补短。但在复杂应用的性能和体验较差。

而 React Native 原理与上面三者都不完全相同。它的底层引擎是 JavaScript Core（或 UIWebView），但调用的是原生的组件而非 HTML5 组件。这样运行时可以做到与 Navive App 相媲美的性能体验，同时因为 JavaScript 代码可以使用后端强大的 Web 方式管理，既可以做到高效开发，也可以实现快速部署和问题热修复。

React Native 的优点

  • 性能媲美原生应用
  • 开发效率高
  • 组件化开发
  • 节约开发成本
  • 实时远程调试
  • 代码热部署
  • 有效降低移动应用安装包体积

二、编程思想

React Native
Learn once, write anywhere: Build mobile apps with React

在设计思想上 RN 强调的是一次学习随处编写，即通过学习 RN 框架，从而在不同的平台上（主要是 iOS、Android）针对不同的平台差异性通过 RN 框架，编写不同平台的代码。

响应式编程范式
In computing, reactive programming is a programming paradigm oriented around data flows and the propagation of change.

在 RN 的框架设计上主要存在的难点是编程思想的转变，需要好好理解响应式编程范式，Reactive 关注的是数据的流动以及变化的传播。

组件化与单向数据流 Data Flow

利用 props 形成单向的数据流
根据 state 的变化来更新 view
利用虚拟 DOM 来提升渲染性能

Flux | Redux
软件架构: MVC->MVP->MVVM

三、主要技术点

JSX：定义直观的用户界面

组件化：组件就是状态机

单向数据流：使用 Flux（或 Redux）管理状态及数据流

虚拟 DOM：通过局部刷新，提高 DOM 渲染性能

原生模块：Swift | RxSwift

React Native 通信机制
React Native 技术概览

学习路径

首推官方文档，Demo 可通过官方 Demo 学习，其它 Demo 可在 RN 学习指南及 Awesome React Native 中获取。

预备知识

  1. 熟悉 JavaScript (ES6)
  2. 熟悉 CSS
  3. 熟悉 FlexBox 布局
  4. 了解 React
  5. 了解 Node

IDE 推荐

  1. 主推：IDEA / WebStorm
  2. 官方：Nuclide
  3. 其它：Sublime、Visual Studio

相关文档

  1. RN 官方文档
  2. RN 中文文档
  3. 官方 F8 Demo
  4. RN 学习指南
  5. Awesome React Native
  6. React 官方文档
  7. React 中文文档
  8. React 入门教程1
  9. React 入门教程2
  10. Redux 文档
  11. React Native 测试
  12. F8 测试相关
  13. React Redux
  14. RN 项目目录结构参考1
  15. RN 项目目录结构参考2
  16. FlexBox
  17. RN 组件库

四、工具

Flow：JS 静态类型检测框架

Jest：测试框架

ESLint：JS 与 JSX 的语法检查框架

Babel：语法转换器

WatchMan：文件修改监控服务

五、第三方库

Lottie-react-native // Lottie是适用于Android和iOS的移动库，它可以使用bodymovin解析以JSON 格式导出的Adobe After Effects动画，并在移动设备上进行本地渲染！
react-native-wechat // iOS和Android平台上的React-Native微信登录
react-native-yunpeng-alipay // 支付宝支付
react-navigation // 导航组件
react-native-device-info // 获取手机版本号、机型等系统信息
rn-fetch-blob // 下载支持断点续传
待续…

相关推荐