注:React-Native框架，下面简称RN
大家好，我今天和大家分享的主题叫《零JS基础如何玩转RN》，先简单自我介绍一下，我叫周鸿杰，从事游戏研发多年，在游戏开发方面还略有心得，但是在APP领域，我就是小白一个了，我们在网络上调研了不少资料，最终决定使用react-native来开发APP。
那么为什么选择RN呢？首先简单介绍一下我们公司，我们公司叫上海爱扑网络，我们从08年开始研发网页游戏，11年开始研发手机游戏，去年11月份的时候我们准备要开发APP了，正如前面所说，我们是做游戏开发的，在ios和android的原生开发方面我们是零经验的，所以选择使用原生语言开发，对我们来说学习成本比较高，而且不跨平台的话，研发成本也比较高，那么除了使用原生语言开发，剩下的就是html5和RN了，html5的流畅度虽然说还算不错，但是RN和它比起来，还是略胜一筹，RN是调用原生的控件进行渲染，并且可以和原生语言通信，所以在性能方面我们不用担心，复杂的控件我们可以使用原生语言实现。大家都知道RN是使用js脚本来开发的，所以热更新它肯定是支持的，热更新这一点是比较重要的，做过ios开发的童鞋肯定都知道要通过苹果商店的审核是多么繁琐的事情。然后RN社区比较活跃，今天来了这么多人就能看出来了，所以对于我们团队来说，选择rn框架是有百利而无一害的。
好了，既然选择了RN框架，那么我们需要了解哪些知识点呢？android平台开发，我们需要会java，iOS开发，我们需要会OC，RN是使用javaScript语言的，所以我们要学会js，RN框架本身我们也要熟悉，然后还有Redux，Flexbox布局，还有个ES6标准，刚开始学的时候发现要学这么多东西啊，我的内心是这样的:偶好怕怕啊！
但是不要怕，刚学习一样新东西，我们在战略上要藐视它，在战术上要先从全局的角度去俯视它。这里是一张非常简单的结构图，最下层的就是两个手机系统，然后是RN框架，然后是一些第三方库，最上面的是业务逻辑的js脚本，这么一看，是不是简单了许多？没有java，没有oc，我们一开始要了解的就是RN本身和js脚本。
那么我们从RN框架开始说起，这是一个空的RN目录结构，里面有android文件夹，就是和android系统相关的java代码，ios文件夹就是ios系统相关的oc代码，这两个文件夹对于初学者来说都可以忽略，模块文件夹，里面放的是rn框架和第三方框架，这三个.开头的文件我们也不用理会它们，然后是index.android.js和index.ios.js，这两个文件一看文件名就知道是android系统和ios系统的rn入口了。最后一个是package.json，这个文件比较重要，大家要了解一下，package.json是一个描述文件，记录了npm包的依赖，啥是npm？node package manager，包管理器，我们通过npm命令可以安装我们需要的包，安装命令：npm install name，npm install name –save，这个—save是啥呢？前面我们说了package.json是一个描述项目包依赖的文件，我们安装了一个第三方包了就说明我们项目需要依赖这个包，那通过参数—sace就可以自动地将这个包信息写入到package.json，方便团队里其他人去安装这个包。
接下去我们就需要掌握js脚本了。Js脚本是一门很混论啊的语言，为啥这样讲呢？js号称是面向对象的，但是它的面向对象写法有5种！大家再去试试执行以下整形的1和字符串的1是否相等的逻辑，它会返回true，所以我们在做值判断的时候要使用三个等号。js的浮点语言也是有问题的，比如0.3减去0.2，得到的值并不是0.1，取小数点面前N位的时候它返回的是字符串类型，最坑爹的是数字数组排序的时候，它并不是按照数字大小排的。。。
以上种种的问题，在我写js的时候都让我觉得js在逗我。为啥js这么坑爹呢？这得从95年说起，当时有家叫网景的公司希望能够让网页上的元素动起来，于是派了他们公司的一个哥们去研究一下，这哥们花了十天的时间搞出一个叫LiveScript的脚本语言，当时java是非常热门的语言，为了借势推广这个脚本啊，它又改名叫javascript了，所以大家问javascript和java有什么关系？答案是就像雷峰塔和雷锋的关系一样。到了97年，第一代es标准确定了，什么是es标准？就是几个大公司一起制定的一套准则，规定一些语法层面的东西。99年es发展到了第三代，09年es发展到了第五代，现在大部分人使用的就是es5标准，直到15年，es6的出现让js越来越像java了，至少在类的写法上和java很像了。Es6的出现让我们这些刚接触js的人如同看到了闪着金光的佛祖一般。
es6是我们一定要掌握的，它会让我们更舒服地写出更漂亮的js。
列出我觉得比较赞的几个es6的特性：
默认参数：以前的方法是没有默认参数，要实现默认参数啊就只能是判断一下参数是否为空，如果为空那么就赋个默认值给它。而在es6里我们可以直接在参数后面进行赋值了。
模板对象：这个就像是字符串的格式化，以前要拼接一个字符串，要费老大的劲，通过+号将各个字符串拼起来，现在就很轻松了，通过反引号，里面再加上${}，{}中输入参数名就行了。这个很好记，就是大家都喜欢的$加上大括号就行了。
解构赋值：这个特性让我们在访问Object中的值的时候非常方便。像以前我们要一个个取出来，而现在只要一行代码就搞定了。
箭头函数：js里最让人头疼的是啥？就是this，在一个类中的不同地方，比如闭包函数中，this的指向并不都是这个类的实例，现在我们有了箭头函数了，就方便许多，箭头函数里的this还是原来的this。
Promises：这是异步调用的写法。Js本身是单线程的语言，它要实现异步都是通过回调函数来实现的，如果这个回调函数多了，就会形成回调地狱，让维护者陷入一个无底洞，很难爬出来，而es6的Promises优雅地解决了这个问题。关于异步的话题其实很大，推荐大家去看看 天地之灵 在广州的一次关于异步的分享会的视频，收益肯定匪浅。
Let和const：完全替代var关键词。Var不支持作用域，而let支持，const是定义支持作用域的常量。
Class：类的写法终于统一了，至少在class的实现上，javascript越来越像java了。
Modules：一个js就是一个模块，模块里可以定义无数个变量和方法，使用关键词export使得模块内部的变量和方法可以被外部访问到。关键词import导入模块内的变量和方法，两种写法：
Import {funName} from './moduleName';
Import * as moduleName from './moduleName';
以上是几个比较重要的特性，掌握了这些特性会让我们的代码看上去更加优雅简洁。
做为RN开发者，RN组件的生命周期是我们必须要掌握的，这张图是我从网上找到的，很清晰地介绍了整个生命周期。
• componentWillMount() 第一次render之前执行
• componentDidMount() 第一次render之后执行
• componentWillUpdate(object nextProps, object nextState) 第N(N > 1)次render之前执行
• componentDidUpdate(object prevProps, object prevState) 第N(N > 1)次render之前执行
• componentWillUnmount() 从界面上移除时执行
这就是整个生命周期中自动执行的一个方法，我们可以重写这些方法达到我们想要的效果。其中shouldComponentUpdate可以很方便地控制是否执行render，可以有效地提升执行效率。
那我们如何调试我们的代码呢？android上我们可以使用android模拟器来运行RN项目，将adb连上模拟器，这样在android studio上就能看到java层面的log，如果只是想看到js的log的话，也可以打开rn的debug模式连上chrom浏览器，这样在chrom浏览器的输入台就能看到log。Ios上通过xcode就很方便地看到各种log了。
那我们怎么学习或者提高自己的水平呢？我推荐大家去多看一些开源项目，三人行必有我师，别人的代码多看看，肯定能让自己有所收获的。那么问题来了，去哪里找到开源的项目呢？第一个想到的肯定就是github了，全球最大的同性交友社区，在github的搜索栏中输入react-native，然后按下回车，会出现很多和rn相关的项目，有完整的项目代码也有很多第三方组件，按照star数量排个序，基本上star过50的，都是挺靠谱的项目，都要仔细去阅读它。然后还有一个网站：js.coach，上面有不少的好组件，可以省去我们造轮子的时间。
我的分享就到此了，谢谢大家。
