跳到主要内容

现代前端框架

信息

如果你想了解最新的前端框架有哪些?他们之间的语法区别:
Component Party: https://component-party.dev
图解 JS、React、Vue 设计模式: https://www.patterns.dev

声明式 & 数据驱动渲染

现代前端框架如常用的 React 和 Vue 为例,JSX 和 Vue 提供的模板,目的都是为了实现声明式渲染的功能。即本质上都是描述“状态”与“视图”之间的映射关系:

UI = f(state)

state:当前的视图的状态
f:框架内部的运行机制
UI:宿主环境的视图

响应式

在了解什么是响应式之前,先明确一个概念:响应式是一个过程,它有两个参与方:

  • 触发方:数据
  • 响应方:引用数据的函数

当数据发生改变时,引用数据的函数会自动重新执行,例如,视图渲染中使用了数据,数据改变后,视图也会自动更新,这就完成了一个响应的过程。

虚拟(Virtual) DOM

Virtual DOM 也就是虚拟节点。通过 JS 的 Object 对象模拟 DOM 中的真实节点对象,再通过特定的 render 方法将其渲染成真实的 DOM 节点。

AOT 预编译优化

现代前端框架一般都有编译这一步骤,用于:

  • 代码转换,如:ts 编译为 js,Vue 中将 vue 文件转换成 js
  • 编译优化
  • 代码压缩、打包

编译有两个执行时机:

  • 构建时编译(AOT,预编译)
  • 运行时编译(JIT,即时编译)

路由

在单页应用中,“路由”是在客户端执行的。一个客户端路由器的职责就是利用 History APIhashchange 事件这样的浏览器 API 来管理当前应该渲染的视图。

模式分为:

  • HTML5 history 模式
  • hash 模式

一个路由的各个组成部分如下:

     foo://example.com:8042/over/there?name=ferret#nose
\_/ \______________/\_________/ \_________/ \__/
| | | | |
scheme authority path query fragment
| _____________________|__
/ \ / \
urn:example:animal:ferret:nose

组件

以组件作为基本的抽象单元,组件从类型上分为:

展示型组件

展示型组件是最直接也是最常用的组件,就是用数据渲染视图,“数据进,DOM出”。

接入型组件

接入型组件通常会跟接入数据的 service 层打交道。包含一些和服务器或数据源打交道的逻辑,然后接入型组件会将数据往下传,传给比较简单的展示型组件。在 React 中这种类型的组件被称 为“容器组件(container component)”。

交互型组件

交互型组件典型的例子是对表单组件的封装和增强。大部分组件库,像 ElementUI 都是以交互型组件为主。这一类组件会有比较复杂的交互逻辑,但是它是一个非常通用的逻辑,所以它 强调复用。

功能型组件

功能型组件是比较抽象的组件。用Vue举例,路由的 <router-view> 和 Vue 自带的 <transition> 都属于功能型组件。它本身不渲染任何内容,它是一个逻辑型的组件。它通常作为一个扩 展或一种抽象机制存在。

Diff 算法

对比更新前和更新后的虚拟 DOM 树,找出之间的差异部分并重新渲染。

为了降低时间复杂度,常见框架的做法基本一致,缩减递归迭代规模,将 Diff 算法的时间复杂度降低为 O(n):

  1. 相同类型的组件产生相同的 DOM 结构,反之亦然。所以不同类型组件的结构不需要进一步递归 Diff。
  2. 同一层级的一组节点,可以通过唯一标识符进行区分。