现代前端框架
信息
如果你想了解最新的前端框架有哪些?他们之间的语法区别:
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
组件
以组件作为基本的抽象单元,组件从类型上分为: