React Native 三端同构实战（1）简介及基础原理

look_w

React Native 三端（Web、iOS、Android）同构是指在不改动原 React Native 的代码下，让其在浏览器中运行出和在 React Native        环境下一样的页面。对于使用 React Native 开发的页面，如果又单独为 Web 平台重复写一份代码代价是极其大的，而 React Native        三端同构能以零花费快速做到一份代码三端复用。
React Native 三端同构的应用场景包括：

• 在 React Native 页面崩溃时用对应的 Web 页兜底，以保证用户可以正常使用页面。
• 对于需要分享到社交网络如微信朋友圈、微博的页面，不可避免地需要 Web 网页。

React Native 三端同构基础原理React Native 就像一套新的浏览器标准，它提供了大量内置的原生 UI 元素和系统 API，对应着浏览器中的 div、img 等标签以及 BOM API；但是 React        Native 目前只专注于移动 App 平台，只适配了 iOS 和 Android 两大系统，而浏览器则是适配了各种操作系统。由于 React Native        需要适配的平台更少所以性能会比浏览器要好。
React Native 是基于 React 实现的，编写 React Native 应用和编写 Web 应用一样需要编写大量 React 组件。我们编写的 React 组件经过        render 后会以虚拟 DOM 的形式存储在内存中，React 只负责 UI 层面的抽象和组件的状态管理，各平台都可用虚拟 DOM 去渲染出不同的结果，React 架构如图 1        所示：
图 1. React 架构
由此可见，虚拟 DOM 这层中间抽象在实现 React 渲染到多端时发挥了很大的作用。