在进行任何项目时，熟悉你所使用的工具是很重要的。即使你刚开始接触网络开发，你也可能听说过构建交互式网络应用程序的三种主要工具。HTML、CSS和JavaScript（JS）。HTML包含了网站的内容，CSS决定了网站的布局，而JavaScript实现了网页的互动功能。
你可以用JS本身做很多事情。但今天，我们将看看两个流行的资源，它们可以使JS编程更容易，并帮助我们开发互动的网络应用。Angular和React。我们将简要介绍JS，然后在高层次上比较这两个工具。
什么是JavaScript？
JavaScript是一种 面向对象的编程语言用来开发交互式网络应用程序的。换句话说，JS使我们能够建立响应用户输入的网络应用。 在网络应用中，JS使我们能够:
如果你想建立网站和网络应用，你应该学习JS。练习编写普通的JavaScript是一个很好的学习方法，你可以通过编码挑战来提高你的技能。但是，一旦你知道了基础知识，结合JavaScript库和框架就会有新的可能性。
库与框架
JS库和框架都使用可重用的、预先写好的代码，使程序员的工作更容易。重用代码来执行常见的功能，可以防止潜在的错误，减少程序大小，并节省时间。
这种可重复使用的代码也有助于在一定范围内的编程。一个JavaScript库是一个可以从JavaScript代码中调用的函数的集合。不同的库会有专门的功能，用于在特定的环境下执行某些任务。例如，一些JS库可以帮助你创建图形和可视化，而其他库则专注于图形用户界面（GUI）或应用程序测试。我们可以把这些库的功能看作是你可以放入你的代码中的构建块。
JS框架比库提供更多的结构。框架不是为你提供预先写好的功能块，而是提供一个结构化的模板，你可以把你的代码插入其中。由于额外的结构，框架提供了稳定性，但可能缺乏灵活性。
什么是Angular？
Angular由谷歌开发，是一个流行的前端JavaScript框架，旨在创建单页应用程序****（SPA）。SPA是允许用户互动的网络应用程序，无需加载额外的网页。当你与一个SPA互动时，你的输入可以改变用户界面，而不需要打开一个新的页面。这种单页格式是有效的，因为所有的页面内容都可以预先加载，包括互动元素。 一开始，完整的网页是由服务器发送到客户端的。后来，根据用户与网页的互动，只从服务器上取回网页的一小部分相关子集，并更新到客户端。这大大降低了服务器的负载，并使客户端应用程序更具互动性。
Angular框架为代码提供了结构，充当了模板。事实上，Angular是建立在 TypeScriptAngular是一种编程语言，旨在通过增加语法规则，帮助自动完成、导航和错误检测来改进JavaScript。
什么是React？
React由Facebook开发的Angular是一个广泛使用的前端JavaScript库，用于设计基于网络的互动应用程序。这个库提供了预先写好的功能，帮助开发者建立应用程序。React基于JavaScript ES6+和JSX，JSX代表JavaScript XML，将标记和JavaScript逻辑结合在一起。由于React的内置模块比Angular这样的大型框架要少，一些任务需要外部模块来实现库背景之外的功能。由于React的规模较小，因此有一个好处，就是更容易学习。
Angular vs React:为你的应用开发选择哪一个？
Angular和React都是强大的JS资源，有各自的优势和用例。但哪个更好，你应该为你的项目使用哪个？
学习曲线和灵活性
在学习方面，React的入门门槛较低。熟悉HTML、CSS和JavaScript应该足以开始在React中开发交互式Web应用。由于Angular要求用TypeScript编写代码，这可能被证明是一个轻微的入门障碍。此外，Angular需要在开始之前学习模块、指令、装饰器、服务和模板等概念。
Angular和React都可以通过附加框架用于移动应用开发。Angular使用NativeScript，而React使用React Native和Cordova。
对于结构来说，TypeScript有助于消除错误，并提供自动完成等其他功能，使Angular具有优势。而工具Angular CLI可以帮助及时建立一个项目。然而，在Angular这样一个成熟的框架内编码**，牺牲了React这样一个库所提供的一些灵活性**。
数据绑定的可扩展性
Angular和React使用了不同的方法来处理数据流，而每一种方法都有其强项。Angular支持双向（bidirectional）数据绑定，使应用程序的数据模型和视图（显示应用程序的HTML容器，称为DOM）之间的变化同步。这意味着，当视图发生任何变化时，模型会自动改变，反之亦然。这种双向的数据绑定最初可能更容易操作，但随着应用程序规模的扩大，它可能变得更难管理。
另一方面，React支持单向（unidirectional）数据绑定。在你改变了模型的状态后，这种改变会在视图中呈现出来。但改变视图中的东西并不会自动改变模型。当你用Redux（一个用于状态管理的库）增强React时，你会得到一个单向的数据流，它更具有可扩展性，这有助于调试大型项目。
响应性
在响应性方面，React有一个优势，因为它的虚拟DOM（文档对象模型）:
什么是DOM？DOM是网络文档的一个接口。它以树状的数据结构表示网页。使用DOM，一个程序可以很容易地改变一个文档的结构、风格和内容。
如前所述，React使用的是虚拟DOM，而Angular使用的是真实DOM。虚拟DOM便于对网络应用的一个元素进行微小的数据改变，而不必更新整个树状结构，这使得它更有效率。相反，在真实的DOM中，对应用程序后台的每一个变化都需要刷新整个树状结构。这被认为是更慢和更不有效的。因此，与Angular相比，React的响应速度更高。
生态系统的多样性
Angular是一个更大的框架，提供了一个具有更多内置功能的整个生态系统。你不需要在Angular应用中添加模块来处理数据绑定、路由和API交互等事情，所以开发者通常更倾向于将其用于大型企业项目。React是一个较小的库，使其成为小型项目的最佳选择。React应用有时需要第三方模块或库来完成库中没有内置的任务。这些可能包括数据绑定、基于组件的路由、项目生成和依赖注入。
优点和缺点的总结
让我们简单回顾和总结一下Angular和React的优点和缺点。
Angular的优点:
- 提供结构
- 对企业项目有很高的价值
- 最适合于大型项目
- 丰富的内置功能
- 大多是开源的框架
- 支持移动开发，使用NativeScript
- 支持双向（bidirectional）数据绑定，这可能更容易操作
React的优点:
- 比Angular的结构更灵活
- 比Angular更容易学习
- 最适合于小型项目，不需要添加第三方模块
- 有能力从第三方模块中获取额外的功能
- 完全开源的库
- 支持移动开发，有React Native和Cordova
- 支持单向（unidirectional）数据绑定，使代码稳定，更容易调试
- 使用虚拟DOM，比真实DOM更有优势
Angular的缺点:
- 结构不如React灵活
- 学习曲线比React更陡峭
- 双向的数据绑定会使应用程序的调试变得更加困难。
- 使用真实的DOM，比虚拟DOM慢。
React的缺点:
-
缺少Angular的结构
-
内置功能较少
-
单向数据绑定的工作可能更复杂
总结和下一步工作
总之，如果你正在做一个较小的项目，React可能更适合你，因为它更容易上手，并且仍然可以通过内置功能和第三方模块执行许多任务。如果你正在寻找一个更有结构性的框架，有大量的内置功能，或者正在进行一个更大的公司项目，Angular可能是你的最佳选择。对你来说，最佳的工具取决于你要建立的东西。
无论你决定学习React还是Angular，最终都会被证明是你编程武库中的一个有用工具。
学习愉快!
