为什么选用 React 创建混合型移动应用？（为什么选用紫色洋葱鳞片外表皮）

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

注意：React Native 在2015年首发。然而，在本项目开始时，React Native Android 版还未发布，因此我们无法使用之。

混合型应用中的挑战

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

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

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

进入 React

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

JSX

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

class MyTitle extends Component {  render() {    return (      

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

Mixins 对决 Composition

/** * 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 ;    }  }

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

import {withDecoratedData} from '...';// Decorate component using ES7 decorator '@'@withDecoratedDataclass MyComponent extends Component {  render() {        return 

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

单向数据流

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

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 (                        My title