现代前端框架
信息
如果你想了解最新的前端框架有哪些?他们之间的语法区别:
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 节点。