React Native杂谈

   <p>和 <a href="/misc/goto?guid=4958534310893103470" rel="nofollow,noindex">reactivecocoa</a> 一样， <a href="/misc/goto?guid=4958869360543124738" rel="nofollow,noindex">react-native</a> 也很早就开始关注了，之所以到前段时间才学习，原因有几点</p>    <ul>     <li>整个项目已经相对成熟</li>     <li>国内外社区比较活跃</li>     <li>JavaScript和React学习成本并没有想象的那么高</li>    </ul>    <p>对这前两个原因我觉得有必要详细说明下，下面的内容我会用RN缩写来代替react-native</p>    <p>RN的更新频率很高，从目前来看差不多半个多月一个版本，从去年的3月底发布一个版本 0.1.0 以来到现在的 0.25.0 为止一共发布了82个版本，当然这里面包含很多rc版，而且从Star数来看RN已经成为非死book排名第二的开源项目了，可见非死book对RN的重视程度。</p>    <p>其实影响一个项目的流行程度很大一部分取决于其社区的活跃程度，RN社区现在这么活跃也是得益于非死book的推广，比如这两年的F8大会、开源基于Atom的IDE： <a href="/misc/goto?guid=4958878276086611165" rel="nofollow,noindex">nuclide</a> 、第三方库搜索网站 <a href="/misc/goto?guid=4958990017943746109" rel="nofollow,noindex">js.coach</a> ，以及自家的 非死book Ads Manager 和 非死book Groups 项目使用RN开发等，国内的也有不错的交流平台，比如 <a href="/misc/goto?guid=4959655646655543307" rel="nofollow,noindex">react native中文社区</a> 。另外github上两个RN学习资料、组件等的集合项目 <a href="/misc/goto?guid=4958970342695520636" rel="nofollow,noindex">awesome-react-native</a> 和 <a href="/misc/goto?guid=4958875407276475888" rel="nofollow,noindex">react-native-guide</a> 都是不错的指引。</p>    <p>我挑了几个大家比较关心的问题一一说下自己的看法和理解</p>    <p>学习成本</p>    <p>我想对于学习一项新技能，都会首先去了解需要什么基本条件。对于RN来说，需要的当然就是JavaScript和React基础，但我并没有刻意的去学习JavaScript和React，而是直接上手RN的同时了解和学习这两样。个人认为对于有开发经验的程序员来说，语法并不是问题，即使对于JavaScript这种我认为很”随便”的语言也是一样，所以当你想学习RN但是没有JavaScript和React经验，根本不用担心因为没有基础给你带来多大的阻碍。</p>    <p>性能</p>    <p>关于性能问题有很多文章都分析过，我只说自己的主观感受，对于iOS而言，只要不是非常复杂的页面性能基本接近native，不过有时候你可能会在页面切换的时候察觉到略微的卡顿。安卓可能是平台或者RN优化的问题，目前性能表现不是非常理想，不过完全可以接受。这里需要提一下，RN上的动画会对性能造成一定的影响，所以并不建议使用大量动画，官网也有文档阐述了性能问题以及出现的原因，如果遇到性能问题，强烈建议仔细阅读。</p>    <p>实际应用</p>    <p>完全用RN来写一个商业项目我想会遇到以下问题：</p>    <ul>     <li>多少会涉及到native平台的代码，除非你的项目非常简单，没有涉及到第三方平台(第三方分享、登录)，没有复杂的页面，没有复杂的处理，没有复杂的动画。举个例子，比如APP有清除缓存功能，那么你必须得写两套代码，个人认为无论RN迭代到什么程度，都还是有无法同时满足两个平台的情况，这时候就需要依靠第三方库了。</li>     <li>平台之间的UI差异，RN的理念是 write once, run anywhere ，所以你还是需要做好适配平台的准备，这是几乎也是无法避免的，另外可能相同的控件在不同平台上的表现也有差异，我曾经遇到过 TextInput 控件的 placeholder 位置在两个平台下位置不同情况。</li>     <li>动画，前面我也提到动画对于性能会存在一定的影响，而且复杂的动画对于RN来说是非常困难的</li>     <li>RN本身的bug问题，这个问题或许在早期版本尤为突出，一旦遇到只能寄希望于RN团队尽快解决，这种对于商业项目就较为麻烦了</li>    </ul>    <p>另外对于初学者，MAC平台我推荐使用编辑器： <a href="/misc/goto?guid=4958832861167207492" rel="nofollow,noindex">Atom</a> ，配合前面提到的基于Atom的IDE： <a href="/misc/goto?guid=4958878276086611165" rel="nofollow,noindex">nuclide</a> ，再加上几个Atom插件：</p>    <ul>     <li><a href="/misc/goto?guid=4959672265237810595">language-babel</a></li>     <li><a href="/misc/goto?guid=4959672265319005952">language-javascript-jsx</a></li>     <li><a href="/misc/goto?guid=4959672265391678650">react</a></li>    </ul>    <p>来自： <a href="/misc/goto?guid=4959672265483705347" rel="nofollow">http://bawn.github.io/react native/2016/04/15/ReactNative.html</a></p>