React 第二十八章 前端框架

首先我们考虑一下 React 或者 Vue 究竟是库（library）还是框架（framework）？

实际上，无论是 React 也好，还是 Vue 也好，他们的核心是“构建 UI 的库”，提供了如下的功能：

• 基于状态的声明式渲染
• 提供组件化开发

当应用进一步的扩展，从简单的页面升级为了 SPA，此时意味着需要前端要有前端路由方案，例如： react-router、 vue-router

随着应用复杂度的进一步提升，组件的数量越来越多，状态管理越来越复杂，因此就需要状态管理的库，例如： redux、react-redux、vuex、pinia。

我们发现，除了上面提到这些功能以外，还有很多其他的功能（构建支持、数据流方案、文档工具）。React 和 Vue 本身其实是不支持的，所以说 React 和 Vue 本身只是专注于 UI 的渲染（构建 UI），因此我们可以将“包含库本身以及其他附加功能”的解决方案称之为框架（技术栈、全家桶），例如：

• UmiJS 这个就是一款框架，基于 React、内置路由、构建、部署等功能
• Next.JS 是一款框架，基于 React、支持 SSR、SSG 两大功能的服务端框架

在平时我们经常能够听到“React框架、Vue 框架”这样的说法，这个时候所指的 React 或者 Vue 往往指的是整个 React、Vue 本身以及它们周边的生态产品，因此这个可以算是一种约定俗成的说法。

现代前端框架至少包含以下几个方面：

• 基于状态的声明式渲染
• 支持组件化开发（复用）
• 前端路由方案
• 状态管理方案

真题解答

题目：谈一谈你对前端框架的理解？

参考答案

在早期使用 jQuery 时代，那时的开发人员需要手动的去操作 DOM 节点，那个时候流行的还是 MPA 的模式，各个页面的 JS 代码量还在能够接受的范围。

但是随着单页应用的流行，客户端的 JS 代码量出现井喷，此时如果还是采用传统的手动操作 DOM 的方式，对于开发人员来讲有非常大的心智负担。

此时就出现了能够基于状态声明式渲染以及提供组件化开发模式的库，例如 Vue 和 React。这两者本质上仅仅是构建 UI 的库，但是随着应用的复杂度的提升，还需要前端路由方案、状态管理方案，所以有了 vue-router、react-router、vuex、redux 等周边生态产品。

Vue 或 React 和这些周边生态产品共同构成了一个技术栈，现在我们会将 React 或者 Vue 称之为框架，这可以算是一种约定俗成的说法。

一款现代前端框架，在它本身以及它的周边生态中，至少要包含以下几个方面：

• 基于状态的声明式渲染
• 支持组件化开发
• 客户端路由方案
• 状态管理方案