2022年你应该选择哪一个？

0 Shares

本文深入探讨了 React 和 Angular 这两个在 Web 应用程序开发领域备受欢迎的工具，着重分析了它们的主要特性和差异。

Angular 和 React 都是构建 Web 应用程序的热门选择，在 Google 趋势中都表现出较高的关注度。Angular 作为一款成熟的 Web 框架，地位稳固，而 React 自 2018 年以来也取得了显著的增长。Angular 遵循 MVC 架构，而 React 则以其出色的特性，更适用于开发轻量级应用。

在深入探讨两者之间的关键差异之前，让我们先对它们进行简单的了解。

什么是 Angular？

Angular 是一款为开发人员提供框架结构的 Web 框架，用于构建动态 Web 应用程序。它是开源的，并使用 Typescript 编写。最新版本为 12.1.4，发布于 2021 年 7 月。Angular 的出现，帮助开发人员解决了使用 JavaScript 作为主要客户端脚本语言时遇到的难题。

可以将 Angular 视为 HTML 的一种扩展，它增加了一些新的、便捷的属性。下面是一个简单的代码示例，让我们一窥其特性：


<body>
<style>
form.ng-dirty {
color:orange;
}
form.ng-pristine {
color:blue;
}
</style>
<form ng-app="">
<p><b>你的名字是？</b> <input type="text" ng-model="user_name"></p>
<h1>你好，{{user_name}}！你今天看起来很棒！</h1>
</form>
</body>

在上述代码中，用户在文本框中输入名字，当开始输入时，文本颜色会发生变化，并且输入的名字会显示在问候消息中。

此处使用了 Angular 表单指令，无需额外的 CSS 元素。
表单元素 ng-dirty 和 ng-pristine 负责颜色的切换。
ng-app 是 Angular 应用程序的名称。
ng-model 属性类似于 HTML 的 name 属性。
双花括号用于显示文本值。

要充分使用 Angular 的功能，如控制器、组件和模块等，需要安装 npm 包（使用 node.js），这超出了本文的讨论范围。

您可以通过学习 Angular 课程进行深入学习。

什么是 React？

React 是一个由 Facebook 维护的免费开源库。相比 UI 框架，它速度更快，并且提供了与其他框架集成的灵活性。

通过 React 的声明式编码方式，我们可以创建可重用的 UI 组件，从而显著减少 UI 开发工作量。一个简单的 React 应用程序可以分解为多个可重用的组件，如下所示：

要使用 React 的全部功能，例如真实应用程序中的组件和模块，需要安装 node.js。为了理解 React 的特性，让我们重写上面的例子：

<html>
<body>
<div id="root"></div>
<!—- 添加所有库 -->
<script src="https://unpkg.com/@babel/standalone/babel.js"></script>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script type="text/babel">
// 添加新的 React 组件，以获取和打印用户名
class WelcomeMessage extends React.Component {
  constructor(props){
    super(props);
    this.state = { name: '' };
  }
  handleChange = event => {
    this.setState({ name: event.target.value });
  };
  // 渲染 UI 并在状态更改时显示结果
  render() {
    return (
      <React.Fragment>
        <form>
          <label htmlFor="name">输入你的名字: </label>
          <input
            type="text"
            name="name"
            value={this.state.name}
            onChange={this.handleChange}
          />
        </form>
        <h1>你好，{this.state.name}! 你今天看起来很棒！</h1>
      </React.Fragment>
    );
  }
}
ReactDOM.render(
  <WelcomeMessage />,
  document.getElementById('root')
);
</script>
</body>
</html>

这里使用了 Babel 编译器，以确保代码可以在任何浏览器上轻松编译。否则，可能无法使用某些 React 代码。

上面的代码看起来可能过于冗长，仅仅为了显示一个字段。但在实际应用中，我们会拥有许多可以重用的组件，所以这样的付出是值得的。

您是否注意到我们在脚本组件中使用了 HTML 代码？答案请查看以下章节： React 的特性.

Angular 的特点

让我们来了解一下 Angular 的一些突出特点：

开发人员可以快速构建渐进式应用程序，无需复杂的安装过程。
适用于创建桌面和移动应用程序。
支持跨平台。
为应用程序提供结构化的 MVC 架构。
加快开发速度，因为只需编写少量代码。
性能卓越。
拥有强大的模板语法，可以轻松创建 UI 视图。
可以在简单的文本编辑器或 IDE 中进行代码开发。

React 的特点

React 的一些典型特征包括：

ReactJS 使用类似 HTML 的语法，称为 JSX (JavaScript XML)，因此 JavaScript 和 HTML 代码可以写在同一个文件中。
ReactJS 应用程序具有独立的、可重用的组件，每个组件都有自己的控制和逻辑。
组件是不可变的，因此在整个应用程序中提供了单向绑定和合理的控制。
单向绑定使应用程序更具灵活性和高效性。
支持虚拟 DOM 表示。只有当 DOM 表示发生变化时，实际的 DOM 才会发生变化，从而节省内存。
具有高性能和跨平台支持。

Angular 的应用

Angular 可用于大型企业应用程序、单页应用程序和渐进式 Web 应用程序 (PWA)。

许多知名企业都在使用 Angular。例如，Gmail 和 YouTube TV 都是基于 Angular 构建的，并且可以在各种平台（如 Android、Apple 等）上使用。

YouTube TV 还可以在 FireTV、Chromecast 和许多其他平台上访问。

Angular 的其他应用还包括在线学习平台 Udacity、桑坦德和 PayPal 等银行应用程序、Web 应用程序门户 Wix 和 Microsoft Office Web。

React 的应用

React 广泛应用于构建单页应用程序 (SPA) 的 UI。它可以无缝地用于移动和桌面应用程序。Facebook、Bloomberg、Airbnb、Instagram 和 Skype 都是使用基于 React JS 的框架 React Native 的 Web 应用程序示例。

React 是社区驱动的，这使其成为快速构建 UI 应用程序的流行选择。

Angular 的优点

让我们再次强调一下 Angular 的一些重要优势：

借助依赖注入和路由等 TypeScript 功能，提供有效的跨平台 UI 解决方案。
快速加载应用程序并提高应用程序性能。
由于 Angular CLI、出色的社区支持、双向数据绑定和差异加载等特性，开发速度更快。
模块和组件使代码易于阅读、调试和测试。
强大的设计模式，如依赖注入和 Angular 服务。

React 的优点

React 具有一些显著的特性，使其与 Angular 有所区别：

遵循声明式方法——这意味着当应用程序状态发生任何更改时，React 会更新所需的组件，并在数据变化时重新渲染。
React 可以作为客户端库使用，也可以在使用 React Native 和 Node.js 的服务器上使用。
学习曲线简单、文档完善、拥有强大的社区支持和学习资源。任何了解 JavaScript 的人都可以编写 React 代码。
使用 JSX 可以轻松渲染特定组件。
React 无需开发人员编写 DOM 代码，而是将虚拟组件转换为 DOM，从而提供更快的性能。

Angular 的缺点

Angular 提供了许多高级功能，如组件和依赖注入等。然而，这使得初学者不太容易上手，学习和在项目中应用这些概念需要时间。

React 的缺点

JSX 帮助开发人员在 JS 中渲染 HTML。但是，如果组件过大，比如包含表单验证，代码可能会变得复杂且难以调试，尤其是对于初学者。此外，React 仅涵盖 UI，不提供端到端的工作流程。

应该选择 Angular 还是 React？

在回答这个问题之前，让我们回顾一下 Angular 和 React 之间的主要区别：

Angular	React
提供完整的框架，用于设计大型企业、渐进式和单页应用程序。	用作 JavaScript 库，用于渲染单个 UI 组件。
提供依赖注入、差异加载、延迟加载等高级功能。	仅支持延迟加载。
Angular 基于 TypeScript。	React 基于 JavaScript。
遵循 MVC 架构。	基于虚拟DOM。
可以认为是 HTML 属性的扩展。	开发人员可以在 React 呈现为组件的脚本中编写 HTML 代码。
提供调试和测试功能作为工具。	React 没有提供任何内置工具，因此必须使用各种工具进行不同类型的测试。
学习曲线较陡峭，但相对容易设置。	学习曲线较为平缓，但需要花费时间进行设置。
双向绑定，其中模型状态随着数据的变化而变化。	单向数据绑定，其中 UI 元素只能在模型状态更改时更改。
无法在源代码中直接添加 JavaScript 库。	允许将 JavaScript 库添加到源代码。
Angular CLI 提供了大量用于开发和无缝更新的工具。	由于 React 仅适用于 UI，因此它没有 CLI。

考虑到上述差异，我们认为 Angular 和 React 都是单页应用程序的不错选择。但是，如果您的应用程序很大，并且需要大量的验证、路由和依赖项，那么 Angular 可能更适合，因为它还提供了方便的代码测试工具。

如果应用程序需求相对简单，并且基于小型组件，那么 Angular 的所有功能可能会显得过度。此外，React 的学习曲线更容易。

根据项目需求、成本和可用性做出最终选择。

结论 👨‍🏫

本文通过一些简单的代码片段比较了 Angular 和 React 的工作方式，并深入探讨了两者之间的主要差异。

Angular 是一个成熟的开发和测试框架，而 React 则更专注于为应用程序构建 UI 组件。另一方面，React 快速、高效且越来越受欢迎，因为它轻量且适用于移动原生和单页应用程序。Angular 仍然是 SPA 和大型应用程序的首选框架。