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 称之为框架,这可以算是一种约定俗成的说法。

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

  • 基于状态的声明式渲染
  • 支持组件化开发
  • 客户端路由方案
  • 状态管理方案
相关推荐
Mr_Mao5 小时前
告别选型困难!集 VueUse、ahooks、Mantine 于一身:286 个 Hook 的 ReaUse 来了
前端·javascript·react.js
智鸟科技GemeOpen开发者智能设备5 小时前
智能插座二次开发如何接入Home Assistant,从零开始完整工程实现(Python+React)
开发语言·python·物联网·react.js·智能家居
泡海椒6 小时前
趋势分析报表:jquick-pdf折线图PDF生成实战
java·大数据·运维·服务器·前端·pdf
默_笙6 小时前
🚙 一条腿走路会摔:ES 关键词检索、混合召回与 ReRank 裁判
前端·javascript
YIAN6 小时前
从跨域代理到 WebSocket:梳理前端实时通信的底层逻辑与完整实践
前端·websocket
一曲终散6 小时前
创建 SVG 图标预览页面:从零实现到解决 CORS 问题
前端
静默回滚6 小时前
iPhone照片电脑上打不开:HEIC解码从原理到WASM
前端
dsyyyyy11017 小时前
Vue 3 Watch 监视完全指南
前端·javascript·vue.js
航飞光电市场经理7 小时前
人员定位系统“全栈自研”技术解析:从射频前端到定位引擎的架构拆解
前端·架构
Apifox7 小时前
Apifox 9 月更新|CLI 能力升级、GitLab 私有化部署接入与产品体验优化
前端·后端·测试