一个“三端”开发者眼中的React Native
这里是我临时写的一个React Native的试水项目，打开后等会会看到gif动画演示。 https://github.com/xinyu198736/htmljs-ReactNative 欢迎star和watch。
三端的三观
大家别拍我，起这么个diao渣天的标题是为了吸引你进来，大家不要太在意用词。先介绍下我自己，我是一个普普通通的开发者，平常喜欢自己捣鼓 技术，所以涉猎比较广，一些不太常用只是摸过几腿的技术就不说了，至少现在每天都摸的技术大概有三端：前端，服务端，客户端。这篇文章是我作为一个“三 端”开发者角度对React Native的一点点看法，不会太具体，但是希望对大家的认识能有个不同角度的指导。
作为一个ios开发者，我的经验大概有2年左右，虽然不是专业选手，但是一个app开发需要涉及到的东西基本都接触过，坑也趟过不少，其实ios开发的体验还是不错的，熟练了以后构建app还是很快的，不过里面也有不少麻烦的地方，例如：
- 代码量大（那长长的方法名）
- 布局麻烦（特别是AutoLayout，光理解这个概念就要好几天，而且很难用）
- 编译调试耗时（比android快很多，但是还是很慢）
- OC语言和Cocoa框架有些冗余的地方（一堆堆的属性和继承过来的方法）
- 用代码定义样式麻烦（cocoa给UIView加点阴影边框设置字体等，那代码不忍直视）
- 有时候定位问题也挺难，动不动就报个 main thread的报错，完全下不了手（可能是我没掌握好方法）
- pods管理代码，安装个代码等半天，有时候还要翻墙，很不稳定，跟npm之类的没法比。
而对于前端来说，还会对ios的开发有些其他的疑问，例如：
- 要是能用css写样式就好了
- 要是能实时调试界面样式就好了
- 要是支持闭包就好了
- 要是回调写起来跟JS一样方便就好了（指oc中的block）
- 要是代码跟js一样简洁就好了
而React Native其实正是迎着这些问题而上，然后结合三端的优点，搞出来的一个移动端开发框架。
且来看下他有哪些动人之处。
美丽动人的RN
我拿起React Native的第一次，就被它彻底打动了，抛开他的语法，对于前端来说奇奇怪怪的jsx（后面会讨论），它的确解决了我作为一个三端工程师在不同技术端切 换的时候备受的一些困扰，所以那天晚上，我完全没睡着，翻来覆去的，然后跑到朋友圈发了句：“激动人心的技术，未来的发展方向”。第二天早晨，提前一两个 小时就醒过来，继续写了几句RN，那酸爽，那心情。可能作为一个纯粹的前端或者纯粹的ios开发，很难理解，但是对于一个游走在三端的工程师，我看到了一 个真正意义上的统一方案，而且，它足够简单。
React Native的上手很快，去看一下它的文档，总共就一点点：入门，组件，功能。每个页面都短短的一两页，的确就是这么简单。不过这里我并没有打算把这篇文章写成一篇入门教程，所以并不会教你如何构建一个简单的RN应用。
大概总结来，React Native让我觉得值得一提的动人之处：
1.把cocoa里面的controller和view统一成了component，其实RN里只有component这个组件概念，既可以扮演页面级别的组件（controller），也可以扮演一个模块级别的组件（UIView)。入门门槛降低了很多。
2. 动态绑定，这个React的基本功能，被带到了客户端开发中来，数据和视图是动态绑定的，数据发生变化，视图会跟着变化，很多操作视图的代码都可以省略了。
3. 引入了类似于CSS（一个子集）的样式管理，可以内嵌到模块，也可以全局使用，定义样式变得非常简单通用。
4. 引入了Flexbox布局，把ios本身复杂的AutoLayout简化，使用很方便，学习起来也更简单。
5. 引入了方便的npm管理，有大量现成的nodejs包可以用（例如moment，underscore等常用模块），还可以把自己项目模块搞到内部npm上做通用组件，另外，npm上还有不少别人写的react native的插件。例如下面这个。
6. 第三方组件里有一个可以把icon font引入项目的组件，可以在任何显示图标的地方直接用icon font显示，灰常方便。
7. 调试很方便，一次编译后，每次改了js代码，只需要在模拟器里command+R即可重新加载代码。有问题会直接报错，里面有代码行数等详细信息。
8. 完整封装了各种js内置的方法，例如：setTimeout，setInterval，XMLHttpRequest，localstorage，console.log等，都是用oc原生方法封装的。
9. 引入ES6的支持，可以使用各种新特性，例如最常用的箭头函数，解决this作用域乱套的问题。
一口气列举出这么多动人的地方，ReactNative这姑娘还真是不一般，简直校花级别。（小插曲，我觉得React性格就是个姑娘，感性而 简单，而Angularjs则像是一位硬汉，笨重但是踏实而且很全面）。不过，人无完人，现阶段ReactNative也有不少缺点，有些缺点可能会非常 制约他的发展，急需改进，不过还好RN目前只是开发阶段，并不是正式版，该有的都会有的。
并非完美无瑕
我看来，目前ReactNative至少有这么几个比较大的问题：
- 组件不全，第三方组件也不全，遇到某些特殊功能，需要捣鼓很久，例如摄像相关的，文件读写，文件上传之类的组件。
- 性能并非媲美原生，还是有一些损耗的，特别是交换大数据的时候，例如读取相册。
- 只有ios版，限制了在某些公司生产环境的使用。android版不知道目前什么状态。
- ios和android代码并非通用，有可能会需要维护两套，或者在代码内做一些判断。
- 并非网上大家说的，写一次代码，多端通用，网页版和客户端版完全不是一个概念，只有部分代码可重用。
- 把代码都打包到bundle里面，不知道苹果对这种开发方式是否会不太喜欢，甚至拒绝上线。
- 实际开发的时候，还是需要了解底层原理，自己开发跟原生桥接的组件，这个对普通前端来说是一个很大的挑战。
有些问题，随着时间的推移会慢慢解决，有些问题，则很难说，例如开发方式的问题。
对前端开发和客户端开发意味着什么？
ReactNative一出来，有的人一头钻进去开始研究，大部分人却只是稍作了解，然后就投入到了论战的圈子里。例如大家对React的 jsx开发方式的批判，对React组件化开发方式的批判。其实还是那个问题：任何脱离场景的技术讨论都是耍流氓。React并非万能药水，它的出现不是 要大一统整个前端界的所有问题，它事实上只是为了解决一小类问题，所以不要指望你的产品能够用React来解决那些他并不擅长的问题。而对于 ReactNative来说，其实我觉得这正是体现React价值的一个非常吻合的一个场景。React在这个问题中扮演的角色，就是上面讲到的他解决的 那些问题，足够多，而且很完美，这就是他存在的价值，不容否认。
所以，大家要从理性的角度去看待新技术，不要一味排斥，不要套用现有的思维和场景。当你用这样的态度去看RN，你就能看到他的优点和缺点，自做抉择。
我从一个前端的角度来看ReactNative，有这样的感觉：
- 它不是万能药水，只是一种高效的解决方案，不要期望它为你解决了所有问题，要不要使用，还是需要根据场景衡量，而不是脱离开来说它是好的或者是坏的。
- 事实上，目前看来，客户端开发更适合写RN，因为要了解客户端的那套开发理念，对前端来说成本挺高，而对于客户端开发，成本只是理解一个语言。
- RN跟Html5没有冲突，二者场景并不一样，它要取代的是本来客户端开发的部分工作，而不是H5页面，因为在这些场景下它并没有明显优势。
- 对于遇到瓶颈的前端来说，它是一个很好的扩展自己技术栈的方向，有得玩，而且很好玩。
从一个客户端开发的角度来看：
- 用ReactNative的确简化了很多OC开发中的繁琐步骤，比swift也是更胜一筹。
- JS、React社区的活跃度很高，有很大的开源组件开发空间，是一个不错的参与开源社区的机会，大家很需要一些桥接原生的新组件。
- NPM真的是太方便快速了！社区里无数可用的工具库，在OC的世界里可不常见。
- RN是前端侵占客户端开发的触角么？其实很难说，它跟NodeJS一样，试图侵入另一个领域，但是深入是非常难的，大部分人浮于表面，反而帮你承接了最恼人的顶层业务部分。
- 不过你应该会觉得js真不严谨，而且回调很蛋疼，闭包很奇怪，作用域很难理解。也许是时候抛开自己旧时代对js的理解了，现在ES6也是一门很先进的语言了。
未来的开发模式？
最近只是在试水，踩坑，然后我真的准备在公司里把这个事情推动起来，因为我觉得它的确是有意义的，对开发效率有非常明显的提升，不过现阶段还只 能是尝试，毕竟它没有发布正式版，然后还只有ios。不过踩坑也是为了积累，正式版发布后我们就可以快速切入了，到时候就会走的快人一步。
不过可以想象一下未来在生产环境的开发模式，跟NodeJS用来做中间件类似，其实RN最后应该会扮演一个承接前端业务的角色，这部分开发工作，可以是前端来做，也可是客户端来做，主要是用基础组件完成业务开发，其实就类似于中间件的形式。
而客户端开发的主要工作是构建基础组件，封装一些原生桥接的组件供RN使用，基本上是通用组件，应该是一个全公司级别的客户端架构组的概念。
前端做表层业务 + 客户端做底层组件支持。Perfect，还真是有点期待呢！
不扯蛋，埋头去学
不要总是试着去评论一个技术，而是在大家都在学习的时候赶紧迎头赶上去，学习总不会白白浪费的，你看那些大牛，虽然他们以前学习的技术一直在不断被淘汰，但是他们啥时候掉过队。
列一些资料：
- http://facebook.github.io/react-native
- http://www.reactnative.com/
- github搜索 react native 了解第三方开源组件
- http://wiki.ecmascript.org/doku.php?id=harmony:proposals
看个差不多就先试着写个app出来，边做边学，乐趣无限
另外欢迎加入ReactNative QQ群：456662818
