从2011年大学毕业到现在，做开发已经有一段时间。期间做过javaEE，Android，iOS。目前是一名iOS开发工程师。接触react native 也有一段时间，所以有一定自己的理解。这里我们主要还是谈谈我个人对react native的理解，毕竟代码，API什么的，有官网，GitHub，各种大牛的博客等。
我想大部分同学在接触一个新的技术的时候，可能大部分时候，第一反应是查找API，上来就撸代码，这种想法没有错，可以第一时间写出 伟大的程序 ”hello world“。但是很快就会进入瓶颈，比较着教程，或者demo可以写出来，自己稍加修改就报错，或者达不到自己想要的下过，这就是知其然，不知其所以然的原因。我了解，学习一个新的事物或者技术基本是 ”WWH“的思路，那什么是 "WWH”呢？
What？Why？How？
是什么？为什么？怎么做？
那么接下来我就说一下我理解的React Native是什么，为什么要用React Native，至于怎么用React Native，这里就不说太多，只写简单的代码，毕竟网上代码还是很多的。
一、React Native是什么？
React Native 是Facebook公司推出的，可以高效率用JS开发移动端原生应用的技术，它的目的是
Learn once，write anywhere！惊不惊喜？意不意外？此不刺激？是不是好像在哪里听说过？做过java的同学应该都听说过 JAVA 的目的是 Write once， run anywhere！
二、React Native为什么这么火？
熟悉JAVA的同学都知道，JAVA之所以能够 “一次编写，处处运行”，其核心原理是因为java代码并没有直接运行在不同平台的硬件上，而知运行在自己的虚拟机JVM上，至于代码在不同平台，不同硬件的兼容，那就是JVM，java虚拟机的事情了，所以作为程序员本身，大部分时候就可以关心程序的业务逻辑，而不用花太多的时间去考虑平台，硬件的事情了，因为在这之前C 语言 基本上在每个平台上都要编译一次，而且也经常为了兼容平台而该逻辑代码，这个很蛋疼，java就不需要， 这也是为什么java能火起来的原因！
那么React Native又是如何实现 学习一次，处处编写的呢？回答这个问题，我们就必须从ReactJS说起了，因为毕竟React Native是由ReactJS演变过来的，要说明白这个“所以然”，就必须了解下ReactJS了。
读到这里可能又有很多同学已经不耐烦了，为什么还不写代码？不着急，这篇文章的中心主旨是讲思想，所以重点不是代码，各位看官请继续看下去。
我曾经和我的学生解答过，为什么他们学习起来感到特别吃力，即便一个知识点我磨破了嘴皮子，说了许多遍还是不理解，其中一个重要的原因就是为了解释一个新知识，我又引入了另一个新知识，这虽然不是我想要的，但是如果不用这个方法，我也很难讲清楚。大部分同学认为学习是一条直线，或者曲线，只要沿着这条直线或者曲线一直走下去就会很容易到达终点，很容易掌握所学知识。但是事实的情况是学习的过程更像是一颗大树！我们要从地面一直打到最高点，就要把树上的枝枝杈杈都学到，起码要明白，才能弄明白整个知识体系。这里还是举例说明一下：比如你玩LOL，比如你只想学会玩菊花信！玩好菊花信！你只会菊花信的qwer就够了吗？天赋要不要会？符文要不要？其他应用的技能要不要知道？什么是眼？什么是反眼？什么是大龙？什么是小龙？各种野怪有什么作用？位置在哪？其他应用的技能都是什么？... ... 如果你都直接跳过了，拿到菊花信，见人就qwer，是：技能你放出来了，你觉得你会不会死？
同学们不要烦，我们这里简单的介绍下ReactJS，以及其设计思想，这样更有利于我们队React Native的理解。为什么这两个有关系？React Native不是移动端的开发框架吗？ReactJS不是前端开发框架吗？这二者又是如何联系起来的呢？不急，慢慢来，要把一个事情讲明白，墨迹是少不了的。接下来的讲解会涉及到前端的基础知识，设计模式等，所以要求各位同学多少了解一下，如果一点不了解，就不建议读下去了！一下是华丽的分割线：
=======================================================================
了解前端开发的同学都知道，要开发一个网页，用到的基本是三板斧，HTML,CSS,JS。我认为缺一不可。在很长的一段时间里，前端开发都是用这种模式开发，HTML写静态页面，CSS专门负责样式的处理，JS负责逻辑的处理，把这三部分放到一起，就成了一个华丽的，动态的网页，而且也很好的把不同性质的功能分开，放到了不同的文件中，如果要改样式，我们就去找CSS文件，如果修改页面，找HTML，如果修改功能，那就修改JS。很长的一段时间里，大家都认为这种开发模式几乎是完美的，知道突然有一天，有个程序员发现了一个问题：随着项目的不断变大，项目工程里有超级多的CSS,文件，超级多的HTML文件，和超级多的JS文件，直接的问题就是要找一个功能模块对应的CSS费劲了，要找一个功能模块的JS费劲了，因为HTML里引入了太多的CSS,太多的JS文件，间接的问题就是引入的JS太多，很容易发生冲突，覆盖，因为JS的原理允许变量名重复，后声明的变量会覆盖之前的，遇到这类的bug及其难解决。所以在那个还存在B/S工程师的时代，java工程师发现了JSP模板。当下前后端分离的时代，类似JSP模板的前端的各种框架，比如Vue，ReactJS就诞生了。
HTML,CSS,JS这种设计思想是把整个项目里的每个功能，按照功能内部的性质，纵向分了三部分，而模板的思想是把项目的没一个具体的功能模块分割出来，每个模块实现自己的HTML,CSS,JS性质代码，多个模块组装到一起，就形成了一个完整的项目。这种思想被应用在ReactJS中，并且叫做“组件式开发”。
记下来继续说ReactJS的具体实现方式，下面是一段最简单的ReactJS代码：
如果接触过JS的同学可能马上会有一个小疑问，这是HTML代码还是JS代码？我们一般JS代码里是不能写HTML代码的，为什么这里可以？这就是ReactJS的精髓，这是JSX代码，全程是JavaScript XML代码，就是可以在JS中编写HTML代码。那么问题来了，浏览器默认只认识HTML,CSS,JS，这个JSX什么鬼他是不清楚的，所以最终的实现方式是，我们程序员编写的时候用JSX编写代码，最后到浏览器运行的时候ReactJS会把他转化成浏览器认识的JS,HTML,CSS代码。说到这里是不是有同学又想起了上面的Java ？编写的时候只用Java语言，最后运行在不同的平台由JVM去处理平台兼容问题，让JVM把java代码转化成兼容当前平台认识的语言（实际上是C语言）。
划重点啦！！！！！敲黑板！！！！！有人想了既然ReactJS能把JSX语言转化成JS,HTML,CSS让浏览器认，那是不是只要再进一步，我也可以让JSX转化成Android平台的Java，iOS平台的objective-c呢？所以React Native就诞生了！正印证了开篇我说的“React Native 是Facebook公司推出的，可以高效率用JS开发移动端原生应用的技术”！！！！！！
三、React Native是如何实现的呢？
绕了这么久，终于说到了React Native上了，我们明白了为什么他能够Learn once，write anywhere。说到了React Native 就把话题稍微转下弯，我们说下移动端开发，这里我只说Android和iOS。至于塞班，windowsPhone，ubuntu等首先是我没做过，再一个市场占有率几乎为零，可以忽略。
无论同学们做过Android还是iOS开发，必定知道，甚至用过MVC设计模式（当然还有MVP,MVVM等，这些设计模式和MVC类似，都是把项目纵向划分的方式）。M：Mode 模型，准确的说是数据的模型，在Android开发里也有人叫做Bean，它是一个对象，程序员把页面需要的数据已模型属性的方式存储起来，需要的时候调用这个模型的指定属性，
V：view，就是视图，是数据到底要展示成什么样子，是文本视图还是列表，具体什么展示的功能由view负责，Android开发大部分时候这里的V是item，iOS是cell，C：Controller，控制器，这个要多写点，在Android开发里，Controller是Activity或者fragment，在iOS里就是UIViewController,视图控制器！！！！在这些年的开发中有同学只把他理解成控制器，所以按钮的点击事件，滑竿的滑动事件，他都写到了这里，Controller代码里导出都是self.cellxxxxxx，实在让人难以忍受，他还有自己的理论，说“控制器就是做控制的啊，所以我把cell里的按钮，滑竿都拿出来，在controller里操作啊!”,可能每个人的理解不一样吧，大部分时候我们无法改变别人，那就只能改变自己喽！我重审一遍：我个人的认为，C,Controller的作用是处理View和Model的关系，把对应的Model数据放到对应的View视图上！！！！
世界上没有最好的设计模式，之后最合适的设计模式！就像女人，没有最好，之后最合适。MVC在我们的项目规模处于小，或者中等的时候，这个设计模式是没有问题的，开发起来也很顺，可以说是 短，平，快！能用最快的速度开发产品。但是当项目一旦带起来之后，弊端和前端开发的HTML,CSS,JS分割方式类似，项目里的View文件夹超级多的View，Model文件夹里超多的model，因为我们如果严格遵守这样的设计模式，就一定会把没一个功能模块都分割成MVC，造成最后项目中的文件特别多。所以我在一段开发时间里，把不太大的页面代码都写在一起，写在一个ViewController里，自定义cell，模型都通过内部类的方式写在ViewController上面，这样要有点小修改的时候，我只要找一个文件就可以了，但是问题也出来了！复用性不好！如果有一部分功能很类似，甚至都是一样的，复发复用，只能复制代码。这样不科学。那如果我把这个界面的几个功能模块都以组件的方式写出来，哪个Controller就可以把这个组件拿过来，直接装上就可以了！而且复用性非常高。这就是React Native的核心设计思想！（当然原生iOS，Android也逐渐出现了这种设计模式）。
设计模式是跨语言的，这一点我们要知道，那接下来我们还是写一点React Native代码来进一步理解下组件式开发：
//引入 React 组件，从 ‘react’中
import React,{Component} from 'react';
//引入 AppRegistry,Text,View 从 ‘react-native’
import { AppRegistry,Text,View } from 'react-native';
上面的代码无论是做过Android，或者iOS的同学肯定都觉得熟悉，因为import单词都有用，只是在原生app开发语言里，import是引入对应的文件，这个文件可以是Model，可以是View，可以是Controller。在 React Natvie中 这个 import的意思是引入对应的组件，这个组件可以是React Native 原生的（React,AppRegistry,Text,View），也可以是用户自定义的。下面是一个自定义的组件：
接下来是调用自定义组件：
最后把组注册加到app上：
注意，上面的注册操作整个app只能执行一次注册操作！！！！！
其实实际开发中组件肯定有很多，那都回事AwesomeProject组件的子组件或者子组件的子组件！
ps：React Native中文官网：http://reactnative.cn
个人的入门小demo，适合新手入门下载学习：https://github.com/KouMeanSun/AwesomeProject
再附上一个大牛的链接，一个完整的项目，适合中，高级开发学习，借鉴：
https://github.com/huanxsd/MeiTuan
欢迎大家积极讨论，如有错误积极指出，也可以多多交换意见。这只是我的第一篇React Native文章，以后会持续更新，大家一起学习进步。
网友评论