React Native概述及与Weex和Native开发的对比（一）

一.React、React.js、React Native三者之间的关系

React是基础框架，是一套基础设计实现理念，开发者不能直接使用它来开发移动应用或者网页。在它之上发展出了React.js框架用来开发网页，发展出来React Native用来开发移动应用。因为React基础框架与React.js框架是同时出现，同时进化发展，这造成了React基础框架的基本概念，设计思想都是在React.js的相关文档中描述。后来，Facebook推出React Native后，也没有把React相关的概念文档从React.js文档中分离出来。这就造成了学React Native要去看React.js文档，说React Native不时会说到React.js的情况。如果开发者只想关注移动应用开发，那么在React.js的如何开发网页的文档中整理出来React基础框架知识是件不轻松的活儿。

二. 什么是React Native？React是什么，Native又是什么？

React

• React是由Facebook推出的一个JavaScript框架，主要用于前段开发；
• React 采用组件化方式简化Web开发:
  • DOM:每个HTML界面可以看做一个DOM;
  • 原生的web开发方式，HTML一个文件，javaScript一个文件，文件分开，就会导致修改起来比较麻烦;
  • 可以把一组相关的HTML标签和JavaScript单独封装到一个组件类中，便于复用，方便开发。
• React 可以高效的绘制界面
  • 原生的Web,刷新界面(DOM)，需要把整个界面刷新.
  • React只会刷新部分界面，不会整个界面刷新。
  • 因为React独创了Virtual DOM机制。Virtual DOM是一个存在于内存中的JavaScript对象，它与DOM是一一对应的关系，当界面发送变化时，React会利用DOM Diff算法，把有变化的DOM进行刷新.
• React是采用JSX语法，一种JS语法糖，方便快速开发。

Native

• 指使用原生API开发App，比如iOS用Object-C或Swift语言开发。

所以React Native可以总结为：由Facebook推出，基于JavaScript框架和React库来提高多平台开发效率的一门语言。其核心思想是：Learn once, write anywhere.

三. React Native和Weex的对比？

Weex的概念:

• Weex是2016年6月由阿里巴巴推出的一个动态化的高扩展跨平台解决方案，支持iOS、安卓、YunOS及Web等多端开发部署。
• 思想：Write once, run anywhere.

相同点：

• 都可以实现hot reload，边更新代码边查看效果
• 布局都是基于flexbox
• 都采用Web的开发模式，使用JS开发
• 都是支持iOS和Android
• 渲染机制都是Virtual DOM

不同点：

Weex 目标 编写一次页面，三端运行（仅限于页面绘制），RN 提供一整套APP 方案，可以适配Android & iOS

维度	React Native	Weex
支持	Facebook	Alibaba
思想	Learn once, write anywhere	Write once, run anywhere
编写方式	需针对iOS、Android编写2份代码	只需要编写一份代码，即可运行在Web、iOS、Android上
JS引擎	JSCore	V8
框架	React.js组件化，数据绑定 Virtual DOM JSX模板学习使用有一定的成本	Vue.JS 组件化，数据绑定 Virtual DOM 模板就是普通的html，数据绑定使用mustache风格，样式直接使用css
异步	提供了Promise的支持	只支持callback
扩展	不同平台可自由扩展	为了保证各平台的一致性，一次扩展得在各个平台都实现
组件	除了自带的，还有js.coach上社区贡献的，比较丰富	基本靠平台提供
性能	优	更优秀
社区	非常成熟和活跃	开源较晚，社区处于成长期
上手难度	困难	容易

进一步浏览weex和react-native的代码之后，可以得出如下的公式。

weex = Vue.js + H5/Native
react-native = React + Native

总结：

• Weex 和React Native最主要的区别可以总结为：Write once, run anywhere和 Learn once, write anywhere思想层次，以及Vue.js和React.js两大基础框架上的区别。
• Weex相对来说学习门槛较低，易用性和性能等方面有优势；而React Native则在社区成熟性、组件和文档丰富上更有优势。

四. React Native开发与Native开发的对比

Native App

• 优点：性能高；用户体验好；稳定性强。
• 缺点：开发维护成本高，版本更新时间长。

React Native

• 优点：
  • 跨平台开发
  • 跳过App Store审核，远程更新代码，提高迭代频率和效率，既有Native的体验，又保留React的开发效率。
• 缺点:
  • 对于不熟悉前端开发的人员上手比较慢；
  • 不能真正意义上做到跨平台；
  • app包体积增大明显。

五.团队开发模式的选择

根据公司的具体情况选择开发模式：

• 如果用户要求产品的体验度高、稳定性好并且不需要很频繁的更新，则选择Native App开发模式最好；
• 如果核心业务要求用户体验度和稳定性好，部分业务需要频繁更新，则选择Hybrid App（Native + H5）混合开发模式最优，现在市场上大部分都是这个模式。
• 如果是创业型公司或小团队开发，局限于人力和资源，非常推荐使用React Native或Weex开发，基本一个人就可搞定多端开发任务（估计会很累^ v ^）。

当然这也不是绝对的，就像我们公司（搞金融的）的产品，原来是使用Hybrid App开发模式，现在准备部分业务接入RN。