零JS基础如何玩转React-Native

Posted by Hongjie Blog on March 19, 2016

注:React-Native框架,下面简称RN


ppt下载


大家好,我今天和大家分享的主题叫《零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的特性:

  1. 默认参数:以前的方法是没有默认参数,要实现默认参数啊就只能是判断一下参数是否为空,如果为空那么就赋个默认值给它。而在es6里我们可以直接在参数后面进行赋值了。

  2. 模板对象:这个就像是字符串的格式化,以前要拼接一个字符串,要费老大的劲,通过+号将各个字符串拼起来,现在就很轻松了,通过反引号,里面再加上${},{}中输入参数名就行了。这个很好记,就是大家都喜欢的$加上大括号就行了。

  3. 解构赋值:这个特性让我们在访问Object中的值的时候非常方便。像以前我们要一个个取出来,而现在只要一行代码就搞定了。

  4. 箭头函数:js里最让人头疼的是啥?就是this,在一个类中的不同地方,比如闭包函数中,this的指向并不都是这个类的实例,现在我们有了箭头函数了,就方便许多,箭头函数里的this还是原来的this。

  5. Promises:这是异步调用的写法。Js本身是单线程的语言,它要实现异步都是通过回调函数来实现的,如果这个回调函数多了,就会形成回调地狱,让维护者陷入一个无底洞,很难爬出来,而es6的Promises优雅地解决了这个问题。关于异步的话题其实很大,推荐大家去看看 天地之灵 在广州的一次关于异步的分享会的视频,收益肯定匪浅。

  6. Let和const:完全替代var关键词。Var不支持作用域,而let支持,const是定义支持作用域的常量。

  7. Class:类的写法终于统一了,至少在class的实现上,javascript越来越像java了。

  8. 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,上面有不少的好组件,可以省去我们造轮子的时间。

我的分享就到此了,谢谢大家。