现代框架的分类与解析

前端框架的实现原理

现代框架的实现原理基本上可以概括为：

UI = f(state)

这个公式可以解释为：框架内部运行机制根据当前状态渲染视图。

框架内部运行机制 f 的工作原理分为两步：

从 f 的工作原理来看，第二步，在浏览器环境中，“UI 的增删改查”是通过 DOM API 实现的，这一步骤，不同前端框架的实现基本一致，不能作为框架分类依据。

不同框架的差异主要体现在步骤 1 的实现上。

一般规律可以总结为：前端框架需要关注“自变量与 X 的对应关系”。随着 X 抽象层级不断下降，“自变量到 UI 变化”的路径增多。路径越多，意味着前端框架在运行时消耗在寻找“自变量与 UI 的对应关系”上的时间越少。

前端框架中“与自变量建立对应关系的抽象层级”可以作为其分类依据，按照这个标准，前端框架可以分为以下三类：

应用级框架：建立“自变量与应用对应关系”的框架，称为应用级框架，例如 React 组件级框架：建立“自变量与组件对应关系”的框架，称为组件级框架，例如 Vue 元素级框架：建立“自变量与 UI（元素）对应关系”的框架，称为元素级框架，例如 Svelte 与 Solid.js

现代框架为了实现 UI 和逻辑的关注点分离，需要一种存放 UI 与逻辑的松散耦合单元，这就是组件。

从自变量和因变量的角度分析组件

现代框架自变量普遍由 getter（取值）与 setter（赋值）两部分组成

// 初始值为 0 的自变量 x
const [x, setX] = useState(0)
// 取值
console.log(x)
// 赋值
setX(2)

自变量变化会导致“依赖它的因变量”变化，因变量有两种类型：

// 定义依赖 x 的无副作用因变量 y
const y = useMemo(() => x * 2 + 1, [x])
// 取值
console.log(y)

// 当依赖的 x 变化，修改页面标题（副作用）

副作用：函数式编程概念，是指在函数执行过程中产生对外部环境的影响。如果一个函数同时满足如下条件，则称这个函数为“纯函数”：1、相同的输入始终获得相同的输出；2、不会修改程序的状态或者产生副作用。

数据在组件之间的传输方式是：组件的自变量或因变量通过 UI 传递给另一个组件，作为另一个组件的自变量。

为了区分不同方式产生的自变量，在前端框架中：

store 在本质上也是自变量，相比 state，它能够实现跨层级传递。不同的框架中，store 的实现方案不同，在 React 中使用 store 需要遵循三个步骤：

Last updated 9 days ago

Was this helpful?