选择 React 是商业问题而不是技术问题

概要

React 是一个构建可组合的用户界面的工具库。其它类似的有 Angular、Backbone、Knockout 和 Ember，但是相对来说，React 的成长更体现了解决商业问题而不是技术问题。下面我们会讨论为什么 React 很重要，以及它是如何有利于团队工程化的。

规避风险

React 足够稳定 – Facebook 聚集了众多优秀的工程师，并投入了大量资源在 React 项目（Newsfeed，Instagram，Messenger 以及 Ads Marketplace 等）上。这种投入，以及 Facebook 公司自己的产品对 React 的测试，都是其它竞品所不具备的。至少有 571 位（截止 2015 年 12 月份）贡献者参与了 React 的一系列会议以及定期版本的更新。

使用 React 的产品：AirBnB，Asana，Atlassian，BBC，Chegg，CloudFlare，CNN.com，Codecademy，Coursera，Craftsy，Dailymotion，Dropbox，Expedia，Facebook，Feedly，Flipboard，HipChat，IMDb，Imgur，Instagram，Khan Academy，KISSmetrics，Mattermark，Minerva Project，Netflix，OkCupid，Rackspace，Rally Software，Ralph Lauren，Reddit，Redfin，Salesforce，Squarespace，The New York Times，Trunk Club，Twitter，Uber，University of Cincinnati，Venmo，WhatsApp，Wired，Wix，WordPress，Yahoo，Zendesk。

研发效率

健壮的迁移方案 – 不论页面整体是如何构建的，React 都可以在其中的一小块区域落地实现，这样开发者可以以任意节奏进行迁移。需要注意的是 React 需要一个运行时基础库（React v0.14.0 版本大约 gzip 后 39.4kb），因此在旧的基础库被完全移除之前，这种不完整的迁移状态会增加页面资源体积。

性能第一 – React 的设计模式让写出糟糕的代码变得非常困难（对于运行时性能来说，如果明白一部分 React 的工作原理，写出糟糕的代码还是很容易的——译者注）。此外，因为 React 避免了直接操作 DOM，不仅可以替换已有的视图层（Angular、Backbone 或 Ember）逻辑，也可以避免对 jQuery 一类工具的依赖，而 jQuery 往往是编写出大量代码的祸端。

SEO – 搜索引擎优化需要把页面从服务器渲染到浏览器。React 在设计时考虑到了 SEO，除了可以运行在浏览器上之外，通过 Node 也可以运行在服务端。其它的竞品需要大量不稳定的 hack 和众多开发者维护才能达到类似的目的。React 构建起来更简单，降低了维护成本。

增强的代码复用 – React 具备提供高性能和管理完整的组件生命周期的独特能力，显著地增强了开发者的人机工程学特性。通过更简单地创建、分发和使用独立的可复用组件，开发者可以更有效通过抽象公共特征来节约时间。这对像按钮一样的低级元素以及像手风琴一样的高级元素都奏效。

提升开发者效能

减少同级资源的复杂性 – React 把 HTML 和 JavaScript 糅合在了一起，其原理是 HTML 和 JavaScript 总是不可避免地耦合在一起，分离它们仅仅是分离了技术而不是分离关注点。这种思想也可以引申为包含 CSS，通过隔离变量作用域解决了全局命名下的 CSS 开发所遭遇的一连串问题。详见 Radium 和 React: JavaScript 中的 CSS 。

更快的错误隔离 – Facebook 向浏览器提供了 React 开发者工具，可以调试创建 UI 的组件和数据。

简单可理解的代码：当今大多数工具中，模型（Model）代表数据，视图（View）将数据生成为丰富的 UI 和交互。通常模型或视图（例如商城购物车模型）的改变会对其它依赖相同模型的视图产生级联的影响。如果项目足够大，那么这个依赖图谱会变得复杂，以至于修改时不可避免地会产生副作用。

提升可测性：组件作为 React 最基本的抽象单元，将数据作为输入，输出 DOM 而不会有其它副作用。避免了 DOM 在使用和创建中的状态发生耦合，组件变得更原子和可测。

团队收益

快速上手 – React 的 API 非常精简。组合式的声明语法和 UI 元素的组件化让新人上手更快 – 特别是应届生以及对前端领域不熟悉的人。

校正：许多人指出 Google 在内部大量使用了 Angular。我的意思不是 Google 一点也没有使用 Angular，只是我不知道 Google 有把 Angular 用在哪一个拥有海量用户的产品中。这个区别很重要，因为只有这种产品才能真正体现出在维护性、可用性以及人机工程学上的水平，对于有兴趣把工具应用于实际产品的人来说也是一个参考和桥梁。