重新认识现代前端框架

前言

重新认识一下自己所学的框架吧

What？

Vue and React 等, 它们是用于构建UI的库。

• 基于状态的声明式渲染
• 组件化的层次架构

是包含库本身以及附加功能（数据流方案、路由方案、构建支持、文档工具等）的解决方案才称为框架。 Vue渐进式的框架呢，是指按需求渐进的引入附加的功能，而不是开箱即用。

理解

浏览器视图 UI = 框架内部运行机制 fn 处理当前视图的状态 state。

主要有两部分，逻辑和UI,即框架内部运行机制逻辑通过处理每一个视图内部的状态，从而改变浏览器展示的视图。

描述 UI

• Vue 中采用模版语法
• React 中采用 JSX 语法

这里的UI不是指浏览器视图,而是框架用于描述 UI的一种方式，这里的UI 可以与逻辑结合。模版语法，既然前端通过HTML描述UI，那就拓展HTML语法去描述逻辑。 JSX语法，既然前端通过ES描述逻辑，那我就使用ES去描述UI。

组织 UI 与逻辑

先来个概念，自变量与因变量，也就是自变量 x 改变，因变量 y 跟着改变了。

 y = 2x + 1

实际上逻辑中就是这两者的关系，比如react中我们状态state，vue中的响应式对象ref,在它们还是一个最小单位的时候，即

const [state,setState] = useState(0)

const ref = ref(0)

我们在改变状态的时候，即自变量改变的时候，因变量也会改变,即依赖这个状态的变量也会改变。那么只需要收集这些变量进行计算出UI的变化，根据UI变化执行具体的DOM API 渲染到浏览器中。