跳到主要内容

现代前端框架

信息

如果你想了解最新的前端框架有哪些？他们之间的语法区别：
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 API 或 hashchange 事件这样的浏览器 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. 同一层级的一组节点，可以通过唯一标识符进行区分。
成为赞助商