React Native – React.js Goes Mobile

原文

<Hello World />

如果你深入涉足JavaScript开发领域，难免你会听过：React.js已经进入移动端。1月28号，Tom Occhino--Facebokk软件工程师、React.js Conf 2015 演讲嘉宾，把React Native 公布于众。对比Reac.js，React Native旨于在IOS和Android开发中提供组件式开发。

2011年，Facebook创建一个内部使用的UI库，最终命名为React.js。继收购Instagram，使用React.js构建web应用的Facebook工程师，向流行移动应用致意。2014年5月，Facebook以BSD协议开源了React.js。发布至今，React.js已经迭代很多次，当前版本为v0.12.2(最新beta版v0.13.0)。

Why React Anything?

React.js/React Native(简言之-'React')是一个UI库，旨在解决Facebook开发者常见的案例。这些案例并不是Facebook独有的。现在该库的人气正在上升，因为有像可汗学院这样的组织分享的design challenges。React比较流行的特性包括：Virtual DOM, (one-way) data flow 和 isomorphism。

Virtual Dom

"Virtual DOM"是指第一次加载到内存中的DOM，然后渲染为普通的DOM。在React.js里，通过任一普通的JS语法或JSX（JavaScript syntaX）来实现--一段基于XML结构的HTML，直接将传统的DOM元素直接写入JavaScript中。React使用一个diff算法，对比之前和现在（虚拟DOM）两种状态，创建一个DOM patch。这个patch仅包括真正需要的变化，再渲染到实现DOM中。因此，刷新速度远大于传统的DOM操作方法。想要更深入探讨这个话题，移步 Stack Overflow

(One-Way) Data Flow

相对于流行MVC框架的双向绑定，React使用单向绑定。数据从父级到子级的传送是由父级决定的。除了单向数据共享，每个组件保持一个维一的状态，该状态是由组件内的方法控制的。这种结构保证了程序内部间更少的依赖连接。因此，呈现给开发者一个简单的思维模型。

Isomorphic

React 是个典型的同构（isomorphic）JavaScript，意味着它可以同时在服务端和客户端渲染。服务端渲染JavaScript可以提高客户端性能和用户体验。另一个好处就是通过应用程序检索改进SEO。传统单页应用结合application variant，有助于Headless browsers搜索。使用这种variant增加了复杂性，有时也需支付额外费用。由于React代码在服务端渲染，客户端收到的完全可被索引，因此就省去了headless browser。

React goes Mobile

React.js已经进入了JS生态系统，毋庸置疑。React Mobile将继续升温。React Native运行JS的引擎作为独立的，后台进程，通过批处理和异步消息协议与本地主服务（Objective C或Android编写）通信。该协议是一个简单的插件加其它的JS资源。The chief differences between the React siblings are minor。JSX中的DOM元素被替换于对应的原生组件，css-flexbox被用来布局和定位。React Native使用和React.js相同的APIs，因此重点将从学习一个新的库转移到学习其APIs和核心语法。最后，当关闭JS引擎和本地主服务进程的连接，应用将有更高性能，并能处理比传统单页应用更优触摸事件。

Ready for Prime Time?

当你在下一个项目为它评估时，这里给出React的主要优势：

• React并不激进。它的目标在于解决特定的问题，单向数据绑定结构可以提高性能，并能减少开发者的困惑。
• JSX能让你使用类"HTML"语法格式，柔化了代码和标记。这点在React Native里尤为重要，它提高了原生组件代码的综合语义。
• 将原生和web两种开发平台的交叉，助于开发者的效率并能降低维护多个代码库的成本

缺点：

• 理念和语言方面的学习曲线。React不如流行的库如jQuery，也不完全像MVC/MVVM类型的框架如Angular JS或Ember.js
• Deciding to use React will require buy-in from designers, product managers, content owners, and anyone else who touches markup. JSX不是HTML，不合理的标记也许会引起BUG，直接暴露给客户
• React Native 通过JS捍卫CSS，一种的delivery机制，将内联CSS渲染到组件上。Cool - 但这违背另一种最佳实践，and potentially another source of defects from non-developer contributors.

Final Word

React.js 和 React Native 就是一个有吸引力的豆荚里的两个豌豆。虽然它的实现细节违背最佳实践。但它们要实现一个明确的目标：高性能、方便使用的库、重视用户体验和代码的可维护性。React Native，就像React.js一样，是同构的--梦幻般的在移动端前行。React Native不久将开源，并支持Android平台。最重要的？ React Native 开发者就是React.js开发者。两个以前不同技术营造了一个通用的解决方案。尽管这并不完美，但这决对是JS生态圈最值得庆幸的事了。