[ 卡卡 DAY 2 ] - React Native 是什麽？ 原理？优点？

起源

於 2015 年 3 月 Facebook 开放了 React Native 的原始码，让使用者可以利用 JavaScript 和 React 建立原生 iOS 及 Android App 的框架。保留 React 的开发效率又拥有 Native 的良好体验。

为什麽这样讲？

因为使用 iOS 或 Android 原生来支援 JavaScript 元件，因此显示效果其实就跟原生的 APP 没有两样。

原理

在 React Native 中分为四个阶段（如下图）：

• 第一阶段接收来自 JavaScript 的资料
• 第二阶段透过 RTC Bridge 与原生元件做沟通（iOS/Android）
• 第三阶段利用 CSS 来宣染告诉浏览器排版样式
• 第四阶段是呈现於前端使用者介面上

原生组件运用接口 RTC Bridge 来调用 js 管理 UI component 生命周期及管理 Virtual DOM。

学习需求

要使用 React Native，需要先了解：

• JavaScript 基础知识
• CSS 基础知识 （与 CSS 相似，但以 Flexbox 最为重要）
• React 设计理念

React Native 跟 React 的关系是？

React 和 React native 底层是相同的原理，都是使用 js Virtual DOM 来画面宣染，React 是 HTML dom 的渲染，React native 是原生组件的渲染。

两个都是基於组件设计来开发，也就是 component，组建间通过 props 传递方法或参数，使用 state 改变状态来重新宣染。而 Virtual DOM 就是等整个组件 dom 更新完毕後会有一个比对的过程，来比对哪些组建的状态发生了变化，然後重新做宣染的动作，简单来讲就是只会改变状态改变的部分，而不会全部做宣染，提高效率。

优点

• React Native 使用了 Virtual DOM，只需要写一次，就可以打包 jsBundle 在不同平台的 APP 平台使用，提高开发效率，相对於双平台开发，维护成本相对低了许多

• 运用 codepush 更换 jsBundle 跳过审核机制，快速修改 bug。但在 AppStore 部分禁止热更新的功能中有调用私有 API 及修改原生代表和改变 APP 行为

• 在开发时不考虑装置萤幕的大小问题，做到在不同的装置上高效、清晰的 UI 呈现

• 在调整画面时可以快速在装置上看到效果，不需花费时间启动 build 档案

• 以组件化来开发 UI - 藉由 React 的设计理念制作 component

以上皆是卡卡的学习，若有错误欢迎提出指教。Day2 done!