现代前端框架
如果你想了解最新的前端框架有哪些?他们之间的语法区别:
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):
- 相同类型的组件产生相同的 DOM 结构,反之亦然。所以不同类型组件的结构不需要进一步递归 Diff。
- 同一层级的一组节点,可以通过唯一标识符进行区分。
如果内容对你有用,请作者喝杯咖啡 ☕: