为何选用 React 建立混合型移动应用？

【编者按】本文做者为 14islands 联合创始人、创新 Web 开发者 David Lindkvist，主要介绍有关混合型应用搭建的方方面面。文章系国内 ITOM 管理平台 OneAPM 编译呈现。

最近，咱们有幸与 Fjord 合做，从零开始为其用户打造了一款 HMTL5 混合型应用。

混合型移动应用（Hybrid apps）能够借助多种 web 技术搭建应用，并将其打包为原生应用（Native apps）以适应于多种移动平台。

在本文中，咱们将分析使用 React 与 Cordova 建立 iOS 与 Android 应用时采用的技术以及面临的挑战。

注意：React Native 在2015年首发。然而，在本项目开始时，React Native Android 版还未发布，所以咱们没法使用之。

混合型应用中的挑战

混合式移动应用已经不是什么新鲜事了。同时，它固然也不是编写全部应用的万能钥匙。真正的挑战在于，达到原始应用的极致体验，兼具流畅的动画效果与时尚的用户界面。

在过去，使用诸如 Backbone.js 这类更为传统的 JavaScript MVC 框架，咱们已经在这一方向上作了屡次冒险尝试与努力。

大多数混合式应用项目一开始，都具有快速、响应及时的用户界面。以后，却很容易撞上南墙。这一般出如今项目后期，此时，通过数周的努力，项目已经添加了许多的功能，DOM 中的内容也越发丰富。

此时，视图组件间的关系变得很是难以追踪，而事件监听器的循环依赖会致使过多的 DOM 读写操做。

进入 React

React 是一个用于建立用户界面的 JavaScript 函数库，一般被表述为 MVC 中的 V（View，视图）。

React 知道根据组件的状态进行从新渲染，而且保存一个虚拟 DOM 以实现高效的从新渲染。这种方法很是棒，由于咱们写代码时就好像在从新渲染整个模板，而实际上 React 只会更新发生过改动的 DOM。

JSX

React 与常见框架的最大差异在于，JavaScript 逻辑与 Markup(标记)模板使用 JSX 语法写在同一个文件中。

class MyTitle extends Component {
  render() {    return (
      <header>
        <h1>Hello World</h1>
      </header>
    )
  }
}

适应这种变化须要一点时间。可是一旦掌握，就能极大地你的提升生产力。

Mixins 对决 Composition

笔者是现代 JavaScript 的狂热粉丝，偏好使用 Babel 编写 ES2015 语法。

Mixins 不能与 ES2015 并用，缘由在此。因此，咱们选择 Higher-order-components（高阶组件）来建立功能特征，而非 mixins：

/**
 * Exports a higher order component wrapping the component to decorate
 * @param ComponentToDecorate the component which will be decorated
 */
 export const withDecoratedData = ComponentToDecorate =>  
 class extends Component {
    constructor() {      
      this.state = { data: null };
    }
    componentDidMount() {      
      this.setState({ data: 'Decorated hello!' });
    }
    render() {      
      return <ComponentToDecorate {...this.props}  data={this.state.data} />;
    }
  }

以后，可使用 ES2016 装饰器（Decorator）来应用组件。咱们能够在 Babel 中选择启用 ES2016 装饰器。

import {withDecoratedData} from '...';
// Decorate component using ES7 decorator '@'
@withDecoratedData
class MyComponent extends Component {
  render() {    
    return <div>{this.data}</div>;
  }
}

经过这种方式，咱们将视图组件(View components)与咱们的数据存储(Data stores)进行了联结。

单向数据流

对于一个应用而言，视图层只是表面——表面背后的部分才是错综复杂的境地。React 能够与大多数其余框架结合使用，实现对现有数据模型的渲染。然而，大规模 MVC 应用与循环依赖的问题仍旧存在，所以，Facebook 推出了具有“单向数据流”的 Flux 设计模型，以使数据流动更容易预见。

Flux 的实现方式不胜枚举。在研究了其中一部分案例以后，咱们选定了Alt。

UI 样式与动画

为了让应用尽量地接近原生，UI 动画达到 60 帧每秒，而且没有闪烁现象是相当重要的。移动端浏览器的 JavaScript 性能一直都慢得引人注目，所以，咱们确保只使用纯 CSS 动画与转换。

行内样式 对战 CSS

最近，React 世界很是热烈的一个话题是：是否使用行内样式，也即：在元素样式属性内部设置样式，而不使用 CSS。

实话实说，笔者更喜好 CSS，对行内样式并不很是感冒。CSS 对重要内容的划分很是清晰，而做为 web 开发者，咱们早已熟知如何有效地应用响应式 Web 设计原则（Responsive Web Design principles）来支持不一样的设备性能与屏幕大小。

行内样式的最大争议在于：“状态”在很大程度上是 JavaScript 关心的问题。不少时候，咱们须要根据动态状况来改变样式。不过，你想一下就会发现，经过添加或删除修饰符类以传播状态变更实际上是很完美的方法。

BEM 钟爱 React

笔者偏好使用 Saas 与通过些微修正的 BEM 类命名惯例编写大部分样式。咱们修改了 BEM 块名使其匹配 CamelCased JavaScript 类名，从而为每一个组件实现明确的 JavaScript 与 CSS 组合。

class MyComponent {
  render() {
    const activeClass = this.props.active ? 'MyComponent--active' : '';    
    return (
      <div className={"MyComponent " + activeClass}>
        <h1 className="MyComponent__title">
          My title
        </h1>
      </div>
    );
  }
);

对于具有许多状态修饰符的组件而言，这会显得有些凌乱与繁琐。为此，笔者建立了本身的 bem-helper 以简化 BEM 类名在 JSX 中的使用。

import BEM from 'bem-helper-js';
class MyComponent {
  render() {    
    return (
      <div className={BEM(this).is('active', this.props.active)}>
        <h1 className={BEM(this).el('title')}>
          My title
        </h1>
      </div>
    );
  }
);

它会自动从 JavaScript 类名中获取块名，并认为 this.props.active is true 为 true 时，下面的类名就会被渲染：

<div class="MyComponent MyComponent--active">  
  <h1 class="MyComponent__title">My title</h1>
 </div>

经过 React 实现动画

对习惯了手动添加类或修改样式的人而言，这部分可能会有点水土不服。现实是，咱们不得不后退一步，让 React 处理 DOM 的全部更新。

大多数动画库都会直接访问 DOM，所以，请仔细选择。

幸运的是，React 团队已经为咱们提供了 ReactCSSTransitionGroup，能帮解决应用动画类、在 DOM 中增减动画元素等常见场景。在咱们的应用中，它有效地处理了页面转换。

收尾

咱们使用了 Apache Cordova来打包应用，生成 iOS 与 Android 版本。其设置至关简单直白，而且提供了许多有用的插件，经过一个 JavaScript API 就能实现一些原生功能。

举个例子，咱们包含了 Statusbar 插件，在运行时改变原生状态栏的颜色。

从 iOS 8 开始，咱们终于能够在惯性滚动阶段（也即在触摸中止后持续的滚动动做）设置滚动事件。旧版 UIWebView 并不支持该功能，而 Cordova 默认使用旧版 UIWebView。

对于 iOS 9 用户期待的 WKWebView 引擎，官方提供了一个 cordova 插件。然而，若是不启用 CORS，没法经过 file:// 协议使用 XHR。

总结

对于使用 React 完成此项目，咱们对本身的选择感到欣慰。可是，咱们仍有一些值得注意的地方，以便在下次作出调整。

优点

• 渲染性能的提高 —— React 能高效地实现 DOM 的更新
• 简化可重用组件的编写
• 强大的 JSX 语法，实现数据与标记模板的结合
• 一旦体系决策达成，组件开始重用，生产力就能提升
• 避免开发者直接接触 DOM （也即：减小伤害性能的风险）

缺点

• 若是不人为直接修改 DOM，使用 React State 很难实现时间线复杂的动画
• 并不是全面的解决方案 ——缺乏经验的开发者很难入门。须要选择一个 Router， Flux 库或数据层等等
• 新的 React 版本发布较为频繁，生态系统不够成熟 ——大多数插件的变化比 React 还频繁，并且 API
  一直在变化。在本项目中，咱们在 react-router 与 Alt 中都遇到过断层式的 API 变化。Alt
  的变化尤为迅速，相关文档也不是最新的。在下一个 React 项目中，咱们会专一于 Redux。

接下来去哪儿

如今，React Native 的势头愈来愈猛，所以值得进一步追踪。关键的不一样在于，它在 JavaScript 与原生 SDK 之间有一个代理层。它在单独的线程中运行 JavaScript 代码，所以在执行其余操做时还能保证流畅的动画。此外，经过 Flexbox 方法，React Native 也选择了行内样式而非 CSS。据估计，iOS 与 Android 之间超过 85% 的代码库能够实现共享。

本文系 OneAPM 工程师编译呈现。OneAPM Browser Insight 是一个基于真实用户的 Web 前端性能监控平台，可以帮你们定位网站性能瓶颈，网站加速效果可视化；支持浏览器、微信、App 浏览 HTML 和 HTML5 页面。想阅读更多技术文章，请访问 OneAPM 官方技术博客。

本文转自 OneAPM 官方博客

原文地址：http://14islands.com/blog/2016/03/03/why-we-chose-react-for-hybrid-app/