为什么我们选择使用 React 而不是 Angular 构建新 UI

（点击上方公众号，可快速关注）

英文：Ross Garrett  译文：oschina

www.oschina.net/translate/why-we-built-our-new-developer-ui-react-instead-angular

如有好文章投稿，请点击 → 这里了解详情

我们在2013年推出了Cloud Elements集成平台的v1版本，这个产品在过去几年里一直为客户和公司发展提供了良好的服务。但是2017年，Web技术迅速演变，从而使用户期望也进一步发展。现在是我们重新思考整个开发者流程的时候了，这也为我们重新思考我们的技术栈提供了一个机会。

在产品发布周期和发布期限的世界中，技术的选择至关重要。以下是我们一路走来的历程，帮助你揭开一些关于React的实用亮点。

我们来自哪里

在React之前，我们使用AngularJS，这可能是当时被选中的最流行的前端框架。 但是如上所述，时过境迁，AngularJS v1.x的统治已被其年轻的小弟Angular 2所篡夺。

离开AngularJS v1.x的一个主要目的是这个框架的生命结束的可预见性。 虽然它仍然得到积极的支持，但这是一个向新事物转变的好机会。

使用 JavaScript 框架的优点

开发团队知道继续使用 JavaScript 框架将提供几个显著的优点：

效率：通过结构良好的预构建模式和功能，可以更快地实现过去需要数月和数百行代码才能实现的项目。

安全性：JavaScript 框架内置安全测试，并且可以得到由成员和用户也作为测试人员的大型社区支持。

成本：大多数框架是开源和免费的。由于它们可以帮助工程师更快地构建定制解决方案，因此 Web App 的最终价格将会降低。

为什么选择 React

当在考虑构建我们新 UI 的不同选择时，React 显然是一个明智的选择，因为它的描述性，高效性和灵活性。与 Angular 不同，ReactJS 是一个基于 JavaScript 的开源库，带有 JSX 编译器。它主要关注用户界面，允许我们创建可重用的 UI 组件。

React 都是基于组件的。使用 React 构建应用程序是将这些组件中的许多组合在一起，将应用程序 UI 带入生活 — 非常像乐高玩具！这些封装的组件管理自己的状态，因为组件逻辑是用 JavaScript 而不是模板编写的，你可以轻松地通过应用程序传递丰富的数据，而不用担心 DOM 中的状态。

你可以为应用程序中的每个状态设计一个简单的视图，并且 React 会在数据更改时处理组件的呈现。

虽然有些人将争取完全无状态的组件，但 React 的真正威力和性能来自于接受应用程序状态概念。

使用 React，你应该永远记住，它实际上并不是一个 JS 框架，而是一个用于渲染视图的库。

虽然有许多框架可供选择（例如，Vue，Ember 和 Angular 2），但 React 具有一些关键优势：

1. JSX 是一种 JavaScript 语法，它启用了 HTML 的引用，并使用 HTML 标签的语法来渲染子组件。它促进机器可读代码的构建，并提供了一个在编译时验证文件中组合组件的能力。

2. 由于使用虚拟 DOM，与 Angular 1.x 相比，它带来了极大的性能提升。除此之外，React 组件可以在应用程序之间创建和重用。

3. ReactJS 和 AngularJS 的主要区别在于 React 是以 JS 为中心的，而 AngularJS 是以 HTML 为中心。JavaScript 要比 HTML 更强大，这使得 React 更加简单，集中和一致。

React 如何改进了我们开发者的开发体验

React 通过 Stackoverflow，Reactiflux Chat，Freenode IRC，Facebook 和 Twitter 等论坛提供支持，这也让我们在选择时更容易做出决定。

React 可能不会做任何事情，但它提供了一个补充工具的列表，包括调试工具，组件工作台，JSX 集成，基本入门工具包，全栈入门工具包，模型管理以及与其他平台紧密合作的其他工具。

React 是 Facebook 和 Instagram 的用户界面使用的框架，这也显示出了它动态，高流量应用程序的效率。React 可能是增长最快的JS“框架” —— 截至今天，GitHub 有超过 1,000 个贡献者。

尽管 React 有一个学习曲线，但它使应用程序开发变得简单易懂。此外，它非常适合复杂，高负载的场景和下一代软件解决方案。

数据来源: https://insights.stackoverflow.com/survey/2017

React 提供了一些有用的开发者工具来创建需要零配置的应用程序。随着平台的不断增长，React 不断发布新功能和升级。最近发布的是 webpack 2，因直接编写和导入 ES6 模块，且不需要将它们编译到 CommonJS 中而有名，这有助于捕获更多的错误。

是什么使得 React 与众不同

React 本身不是一个框架。如前所述，它应该被认为是视图渲染引擎或组件模型。

React 提供可重复使用的可配置组件，让您快速入门。网络上有许多易用的 React 组件，几乎涵盖了所有方面：表单（react-form），状态管理（Redux），SPA 路由（react-router），实时消息（reactfire），管理异步任务（react-axios），绘图（react-sparklines）– 不胜枚举。

这是一个很好的图表，显示了 React 和 Angular 之间的主要区别：

数据来源: https://da-14.com/blog/reactjs-vs-angular-comparison-which-better

结论

当你考虑转向使用 React 或基于 React 构建时，了解你的数据以及你希望将如何发展是你在迈步前进之前必须弄清楚的。例如，React 使用单向数据绑定，其中数据流仅以单一方式进行。因此，你将需要始终关注数据发生变化的地方，使其在大型应用程序中更容易进行调试。

你还需要深入了解你需要解决的业务问题，以及你需要什么数据来回答这些问题。我们是跨团队的数据驱动型组织。因此，在工程中，我们使用监控和数据收集来了解哪些虽然需要花费时间来投入，以及如何最好地利用我们的资源。总的来说，在基于 React 上构建新的 UI，我们克服了困难，但我们从来没有忘记过我们的主要目标 —— 减少耗费的时间以提升价值、数据的灵活性，同时留下进步和创新的空间。

觉得本文对你有帮助？请分享给更多人

关注「前端大全」，提升前端技能