{"action":"created","issue":{"url":"https://api.github.com/repos/gf-rd/blog/issues/35","repository_url":"https://api.github.com/repos/gf-rd/blog","labels_url":"https://api.github.com/repos/gf-rd/blog/issues/35/labels{/name}","comments_url":"https://api.github.com/repos/gf-rd/blog/issues/35/comments","events_url":"https://api.github.com/repos/gf-rd/blog/issues/35/events","html_url":"https://github.com/gf-rd/blog/issues/35","id":150782975,"number":35,"title":"React Native调研","user":{"login":"sessionboy","id":17827693,"avatar_url":"https://avatars.githubusercontent.com/u/17827693?v=3","gravatar_id":"","url":"https://api.github.com/users/sessionboy","html_url":"https://github.com/sessionboy","followers_url":"https://api.github.com/users/sessionboy/followers","following_url":"https://api.github.com/users/sessionboy/following{/other_user}","gists_url":"https://api.github.com/users/sessionboy/gists{/gist_id}","starred_url":"https://api.github.com/users/sessionboy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sessionboy/subscriptions","organizations_url":"https://api.github.com/users/sessionboy/orgs","repos_url":"https://api.github.com/users/sessionboy/repos","events_url":"https://api.github.com/users/sessionboy/events{/privacy}","received_events_url":"https://api.github.com/users/sessionboy/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2016-04-25T08:10:54Z","updated_at":"2016-05-06T04:41:13Z","closed_at":null,"body":"#   React Native 是什么\r\n  \r\n   作者：梁景湛\r\n  \r\n   Facebook在3.26 F8大会上开源了React Native，安卓端也在2015.9提前发布了。其目标在于可以使用web的知识，在不同平台上编写基于React的代码，“Learn once, write anywhere”，在保持开发效率的同时，达到原生级的用户体验。\r\n\r\n   在JS程序中，开发者可以使用react native定义的一套和cocoa touch中UI控件类等价的类，来完成UI层的开发工作，Xcode 编译器 会利用 react-native lib将JS写的代码编译成iOS原生的UI组件，下图展示了利用Xcode的视图调试功能展示了JS代码编译的结果，可以看到，这些JS语言最终确实是被编译成了UIView等对象，而不是H5界面经常使用的webview。\r\n   ![react](http://img.blog.csdn.net/20150424083956268)\r\n   **插图摘自http://blog.csdn.net/lihuiqwertyuiop/article/details/45241909\r\n\r\n   哪些App在用React Native\r\n   https://facebook.github.io/react-native/showcase.html\r\n\r\n# 设计理念\r\n\r\n   React Native 通过React封装了一些UI组件，并实现了Virtual DOM、CSS的子集、事件响应机制，并通过一套DOM diff的算法，通过高效的算法计算 Virtual DOM 渲染的差异，然后在最小范围内更新 DOM。\r\n   \r\n   这种做法在大部分情况下是足够高效的，但是对于一些UI交互上的精细的需求，这种场景React 会显得力不从心，或者很笨拙。不过在大部分的情况下，满足一般业务需求是没有问题的。\r\n   \r\n   ![平台比较](https://raw.githubusercontent.com/sessionboy/Fastform/master/0416013.png)\r\n   \r\n   1，React：不同平台上编写基于React的代码，“Learn once, write anywhere”。\r\n   \r\n   2，Virtual DOM：相对Browser环境下的DOM（文档对象模型）而言，Virtual DOM是DOM在内存中的一种轻量级表达方式（原话是lightweight representation of the document），可以通过不同的渲染引擎生成不同平台下的UI，JS和Native之间通过Bridge通信。\r\n   \r\n   3，Web/iOS/Android：已实现了Web和iOS平台，Android平台也已经在9月提前发布。\r\n   \r\n###  通讯机制\r\n  \r\n   http://blog.cnbang.net/tech/2698/\r\n   \r\n###   UI布局\r\n  \r\n   http://www.infoq.com/cn/articles/react-native-layout\r\n   \r\n#  性能\r\n \r\n React Native的性能更接近原生应用，比Hybrid性能要高得多。\r\n **插图摘自http://airjd.com/view/iap1mz440004r90#20\r\n \r\n### 内存占用对比：\r\n\r\n  1，web: 96.6MB\r\n  \r\n  2，Native: 33.6MB\r\n  \r\n  3，React Native: 40.9MB\r\n  \r\n  ![react](http://sc1.airjd.com/upload/image/7p/8h/iap1mz8i0007p8h-000017.jpg)\r\n  \r\n###  CPU占用对比：\r\n\r\n  1，web: 30.11%\r\n  \r\n  2，Native: 17.23%\r\n  \r\n  3，React Native: 18.83%\r\n  \r\n  ![react](http://sc1.airjd.com/upload/image/7p/8h/iap1mz8i0007p8h-000019.jpg)\r\n  \r\n###  启动时间对比：\r\n\r\n   1，web: 2.1s\r\n   \r\n  2，Native: 0.587s\r\n  \r\n  3，React Native: 0.963s\r\n  \r\n  ![react](http://sc1.airjd.com/upload/image/7p/8h/iap1mz8i0007p8h-000020.jpg)\r\n  \r\n#  对前端开发的影响\r\n \r\n### 对开发人员的影响：\r\n    前端开发人员需要一定的时间去转换概念：\r\n    1， JSX vs HTML\r\n    2，CSS-layout vs css\r\n    3，ECMAScript 6 vs ECMAScript 5\r\n    4，React native View vs DOM\r\n    \r\n    对于开发人员的要求也是比较高的，需要掌握但不限于以下技术：\r\n    \r\n    1，React\r\n    2，Flux\r\n    3，MVC\r\n    4，Object-C\r\n    5，Java\r\n###  对开发模式的影响：\r\n    1，需要混合使用JS和Xcode去开发，不过好处是，第一次编译后，只要更新js代码，reload一下，界面就更新了。\r\n    \r\n    2，通过JSX的布局代替HTML、CSS-layout去写CSS。JSX对开发来说不是难事，主要是CSS方面比较麻烦，每个组件都需要单独去写自己的布局，复用起来比较困难。\r\n    \r\n    3，需要考虑Web、IOS、Android三个端的架构及复用问题，对于现有的前端项目及架构来说需要做很大的调整。\r\n    \r\n    4，系统只有js-objc的单向调用，整个调用过程是异步的。\r\n    \r\n    5，调试也是比较方便，修改了JS代码后，在模拟器里可以直接刷新，并且支持在Chrome或Safari中调试。\r\n    \r\n    6，离不开Native端的支持，IOS和Android端都需要有人力去维护、封装自定义的组件之类\r\n    \r\n#  优势和劣势\r\n   \r\n### React Native与Web和Native应用的对比：\r\n   \r\n#### 优势：\r\n   \r\n     1，摆脱了WebView，避免web view带来的性能低下问题，用户体验上会有不少提升\r\n     \r\n     2，在保留了较好的用户体验的情况下，提升了开发效率\r\n     \r\n     3，使用同一种语言技术，可以同时实现Web、IOS、Android三个端，实现代码复用\r\n     \r\n     4，可以通过云端更新JS脚本更新App\r\n     \r\n#### 劣势：\r\n   \r\n     1，对前端开发人员要求较高。React的设计理念和Jquery、angular差别较大，而且React只是一个UI库（View），需要开发人员构建Router、Model、Controller等等组件；并且还要在一定程度上掌握IOS和Android端的开发，至少要看得懂代码，能调试找问题。\r\n     \r\n     2，扩展性不如Web，也不如直接写Native code，并且React\r\n     \r\n     3，Native提供的中间层，对Native的组件映射不全，对Web的封装也不全（可以看作两者的阉割版本），遇到问题时会比较郁闷。\r\n     \r\n     4，React Native还不够成熟，特别是安卓端还需要迭代，用于生产的话需要谨慎。\r\n \r\n# 结论\r\n \r\n   虽然react native的发展还不够成熟，但也能够满足一般的业务场景，居于其用户体验提升，以及多端同构复用的考虑，值得花时间去钻研。\r\n   对于新的非关键项目，不妨用rn去尝试；对于需要快速迭代试错的项目，不建议使用rn；对于原有的项目用rn改造，需要在维护原有项目的基础上去改造，以避免需求无法响应的风险。\r\n   \r\n# 参考资料\r\n \r\n   http://div.io/topic/851\r\n\r\n   http://blog.cnbang.net/tech/2698/\r\n\r\n   http://blog.csdn.net/lihuiqwertyuiop/article/details/45241909\r\n\r\n   http://www.infoq.com/cn/articles/react-native-overview\r\n\r\n   http://www.infoq.com/cn/articles/react-native-layout\r\n\r\n   http://www.infoq.com/cn/articles/react-native-web\r\n \r\n   http://airjd.com/view/iap1mz440004r90#20\r\n\r\n   http://www.stuq.org/ppt/show/95/5c28db3ecf661208387127be8878aed3\r\n \r\n \r\n \r\n \r\n"},"comment":{"url":"https://api.github.com/repos/gf-rd/blog/issues/comments/217347172","html_url":"https://github.com/gf-rd/blog/issues/35#issuecomment-217347172","issue_url":"https://api.github.com/repos/gf-rd/blog/issues/35","id":217347172,"user":{"login":"changelime","id":3969446,"avatar_url":"https://avatars.githubusercontent.com/u/3969446?v=3","gravatar_id":"","url":"https://api.github.com/users/changelime","html_url":"https://github.com/changelime","followers_url":"https://api.github.com/users/changelime/followers","following_url":"https://api.github.com/users/changelime/following{/other_user}","gists_url":"https://api.github.com/users/changelime/gists{/gist_id}","starred_url":"https://api.github.com/users/changelime/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/changelime/subscriptions","organizations_url":"https://api.github.com/users/changelime/orgs","repos_url":"https://api.github.com/users/changelime/repos","events_url":"https://api.github.com/users/changelime/events{/privacy}","received_events_url":"https://api.github.com/users/changelime/received_events","type":"User","site_admin":false},"created_at":"2016-05-06T04:41:13Z","updated_at":"2016-05-06T04:41:13Z","body":"之前用React Native写过点小玩具，有些操作还是得用java写，还不能直接用npm上的库，写起来太不爽。"}}