一. 什么是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和ReactNative的项目架构异同
Vue.js
Vue.js虽然是Evan You个人开发的开源项目，其社区活跃度以及代码质量还是值得一提的。在写此文章之际，Vue.js在Github上的Star达到了21099，Fork达到了2186。虽然相比于react的Star数44108，Fork数7610还有一定距离，但考虑到作为个人开发者能有如此多的人关注参与，该框架的优秀程度恐怕不会低于React。
Vue.js的文档资料非常齐全，而且其本身的设计非常简洁，因此绝大部分开发者只要花费少量的时间就能快速上手Vue.js。其中VUE.JS: A (RE)INTRODUCTION是 Vue.js的作者Evan You对Vue.js的介绍，非常值得一看。我想这可能也是weex团队选择Vue.js入手的原因之一吧。对Vue.js有兴趣的同学可以移步Vue.js Guide自行学习。
Vue.js用来构建交互式web界面的，其主要的关注点和React是一样的，都是立足于View层。
Vue.js最核心的部分是两个Reactive Data Binding以及Composable View Components。还值得特别关注的是，其保留了html、css、js分离的写法，使得现有的前端开发者在开发的时候能保持原有的习惯。
Vue.js将界面开发分成了三个部分，分别是View、ViewModel和Model，这种划分在客户端开发看来是非常合理的，也经过了实际的检验。以HelloWorld为例来说明，示例来源Vue.js Guide。
<!-- this is our View -->
<div id="example-1">
Hello{{ name }}!
</div>
<!-- this is our Model -->
var exampleData ={
name: 'Vue.js'
}
<!-- this is our ViewModel -->
var exampleVM = new Vue({
el: '#example-1',
data: exampleData
})
这就是经典的MVVM模式，Vue.js通过极简的API，将数据和视图绑定在一起，也就是所谓的Data-Binding。
这样，当数据变化的时候，界面就能变化，实现了数据驱动的响应式变成。
当我们在写网页的时候，本质上就是构造DOM树，DOM树则是由div、span等元素组成的。div、span这样的元素是构建大型应用的基础。其实Vue.js或者其他的UI框架基本也是一样的，他们都会提供自己的组件系统。这些组件就类似div元素，一般具有一下特征：
小巧精致
能重用
自包含，高内聚
当我们使用Vue.js开发应用的时候，就是搭建特定的组件树。这些组件可以是Vue.js定义的，也可以是开发者自己定义的，这非常重要。
看个组件化的例子。
// example组件定义
varExample = Vue.extend({
template:'<div>{{ message }}</div>',
data:function (){
return{
message:'Hello Vue.js!'
}
}
})
// register it with the tag <example>
Vue.component('example', Example)
// example组件使用
</example>
Vue.js的组件都是有自己独立的scope的，因此子组件是不能直接访问到父组件的数据的。数据一般都是通过props来传递的，示例说明。
// define component
Vue.component('child', {
// declare the props
props: ['msg'],
// the prop can be used inside templates, and will also
// be set as `this.msg`
template:'<span>{{ msg }}</span>'
})
// usage
</child>
上述方式只能实现组件树从上往下传递数据，在Vue.js中，会有大量的场景需要子组件向父组件传输数据，甚至兄弟组件之间传递数据，一般这种时候就需要使用以下几种能力。
子组件获取父组件的能力（this.$parent）
自定义事件的能力 ($on, $emit, $dispatch, $broadcast)
想要了解详情，请移步Parent-Child Communication。
前端开发经过这么多年的发展，html、css和js的分开编写应当是顺理成章的，Vue.js没有打破这个规则，通过style、template、script将样式、视图和数据逻辑进行了分离。详见下面示例，来源于VUE.JS: A (RE)INTRODUCTION。
<!-- css -->
<style>
.message {
color: red;
}
</style>
<!-- template -->
<template>
<div class="message">{{ message }}</div>
</template>
<!-- js -->
<script>
export default {
props: ['message'],
created() {
console.log('MyComponent created!')
}
}
</script>
React可能是现在前端开发中最炙手可热的UI框架了。在React的首页最明显的位置上展示者关于React的最核心的三个思想，它们分别是：
Declarative(声明式)
Component-Based（组件化）
Learn Once, Write AnyWhere（一学多写）
React和Vue.js的组件的使用都是声明式的，声明式的编写方式会比命令式的编写更加的直观。关于声明式和命令式的区别，可以参考Declarative programming和Imperative programming，这里就不加详述了。
诚然React和Vue.js在编写大型程序的时候都是构建一颗组件树，但React和Vue.js的组件却有着不小的差异。先来看一个React组件的示例（来源React官网）。
varHelloMessage = React.createClass({
render:function(){
return<div style={divStyle}>Hello {this.props.name}</div>;
}
// style
vardivStyle = {
color:'white',
backgroundImage:'url('+ imgUrl +')',
WebkitTransition:'all',// note the capital 'W' here
msTransition:'all'// 'ms' is the only lowercase vendor prefix
};
});
ReactDOM.render(<HelloMessage name="John" />, mountNode);
在React中，一切都是js，视图、逻辑和样式都是通过js来写的。通过js来统一颠覆了html、css和js分离的原则，当然是褒贬不一了。在Vue.js中，分离带来了清晰度，逻辑、视图、样式和数据可以分别处理，但在React中，一切都需要重新组织，甚至需要新的配套框架和设计模式，比如新的语言JSX就是用来简化js带来的麻烦的。但all in js让很多事情变得简单，js的快速发展也让React脱离了css和html发展限制，可以实现更多的可能性，优化、扩展以及其他很多事情，就只要单纯考虑js就可以了，而不必收到css和html的限制。
当然，这样带来的后果就是学习曲线的陡然增加，React甚至带来了新的JSX语法，同时考虑到React全新的React思想，开发者想要开发生产环境的app，尤其是在将现有app用React重写的时候，成本是要比Vue.js高出不止一个数量级的。
React推崇的是单向数据流动，也就是说，数据最好是从组件树的顶端往叶子节点流动，尽量少的出现反向流动的情况。
用另外一种方式来说，React希望实现的immutable data，数据的不变性。只读的数据能给我们带来非常多的好处，并发、简化逻辑、数据统一管理等等。
React提供了props和state两种数据类型，props是实现数据从父组件往子组件传递的机制，而state则是提供了一种机制来实现组件的自更新，facebook是建议尽量少用该特性，因为其违反了immutable data和单向数据流动的设定。
因为React的数据设定让其数据管理成为一个问题，业界出现了一些解决方案，其中最为著名的应该就是redux/flux了，有兴趣的同学可以上github搜搜，都是开源的。
React背后是强大的facebook在开发维护，其目的不是要简单的创建一种新的js的UI框架，相反，其想要让React成为平台无感知的UI开发思想。什么意思呢？就是本节要说的learn once，write anywhere。facebook认为每个平台不可能完全一样，Web、Android、iOS、Windows Phone甚至Xbox，以及未来会出现的各种平台，他们都会有自己的发展理念和发展路劲，不可能做到完全一样，但不管平台如何变化，基于平台之上，创建Virtual DOM，React通过控制Virtual DOM来实现界面变化。
也就是说Virtual DOM相当于是一个中间层，隔离平台的差异，从而实现统一的开发方式。
不敢说这样的想法一定能成功，但就现在的发展势头来看，机会还是非常大的。尤其对于开发者来说极具吸引力，如果这一想法成为现实，以后React就可能像DOM一样成为业界统一的标准。那对于iOS开发者来说，在Android上面开发会跟在iOS上开发一样，不需要学习全新的Java语言，Android系统，更不要说各种Java特有的艰深复杂的工具了。
个人感觉weex和react-native最大的不同是在Vue.js和React层面。这一点在react-native的命名上就非常容易看出来。在react-native刚出来的时候，其和React的关系是react-native依赖React。
"dependencies": {
"react":"~14.0.0"
}
而现在react-native和react则是同级别的。
"peerDependencies": {
"react":"~15.1.0"
}
react-native中最重要的文件名字也是Library，主要提供了一系列Native的能力。
查看weex的源码，native部分的作用几乎是一样的，主要就是提供了一些列Native的组件，以及其他的一些能力。
这也就是为什么本文将两者的Native合为一谈的原因，他们的本质是差不多的。
提供了js和native交互的桥梁Bridge
提供了一系列组件
提供了flexbox布局支持
提供了事件支持
……
当然，因为weex和react-native的设计思想的差异，在native部分也存在差异，但我觉得这是因为js需要导致的，仅就native而言，两者并没有特别大的不一样。
网友评论