对比Angular和React

  • 核心功能
    • React 核心库只提供构建 UI 组件的方法,其他功能通过社区提供
    • Angular 集成了 路由、异步请求、表单、模块化 CSS 等功能
  • 组件
    • React 组件推荐使用 JSX,可以一个文件包含 HTML、CSS 和 JS,也可以分开
    • Angular 组件 HTML、CSS 和 TS 分别是一个文件
  • DOM
    • React 基于 Virtual DOM,组件会被编译成 JS 对象,数据更改时通过 Diff 算法更新
    • Angular 基于 Incremental DOM,组件会被编译成指令,数据更改时就地更新。没有使用规定指令的组件可以被 Tree Shaking
  • 数据绑定
    • React 单向数据绑定,声明状态,更新视图
    • Angular 双向数据绑定,数据改变,更新视图
  • 全局状态管理
    • React 可以用全局对象或 Redux 实现
    • Angualr 可以用 Service 依赖注入实现
  • 上手成本
    • React 推荐了解 JSX,可以作为库函数渐进式使用
    • Angluar 需要了解 TypeScript,Rxjs,OOP 和装饰器等,推荐作为web应用的基础框架独立使用

前端技术选型

本文主要面向前端基础框架和库的选型,不包括构建工具、 UI 库和框架配套解决方案的选择。由于前端发展速度很快,框架层出不穷,特标明本文发布时间为 2021年6月6日,更新时间 2022年2月21日,更新时间 2022年3月14日,只适用于2021年前端基础框架技术选型。只选择了 web 应用开发时使用的框架,桌面端框架如 Electron、Tauri、Flutter,或者跨平台框架例如 React Native、Weex 或者众多的小程序框架本质上和如下列出的框架不是解决同一类问题所以不在对比之列。

阅读更多