自己的理解阅读时推荐先看问题想想自己的答案再和答案比对一下本文属于前端框架科普读完快速对前端框架有个概览

文章目录前端框架原理概览1

useReducer如何使用和useState有什么关系区别如何利用useReducer实现一个useState9

react

useState如何实现state改变时useEffect重新执行2

useState如何实现state数值改变之后如何触发UI的更新3

AOT和JIT有什么区别4

VDOM框架jsx描述UI的框架模板语法描述UI的框架blockdom

inferno6

react本身是构建UI的库将其称为框架是约定俗称的说法其实不是框架

f(state)

框架f就是一个函数自变量state是当前数据因变量是宿主环境的视图

state:

有副作用useEffect((){document.titlenew

数据如何在组件间传递

reduce函数式编程当中的一个术语reduce操作被称为Fold折叠

const

0)拿JavaScript来理解。

reduce属于一种高阶函数它将其中的回调函数reducer递归应用到数组的所有元素上并返回一个独立的值。

这也就是“缩减”或“折叠”的意义所在了。

reducer(state,

redux中的reducer函数是因为它的入参和返回值都非常类似于arr的reduce中传入的回调函数

reducer接收两个参数

useReducer如何使用和useState有什么关系区别如何利用useReducer实现一个useState

useRedcuer是useState的替换方案和useState相比它更适合state逻辑复杂或者state是个对象包含多个子值或者下一个state依赖于之前的stated的情况。

相当于收敛逻辑于reducer函数中进行管理

useReducer使用

区分dispatch函数和reducer函数dispatch(DECREMENT);}}-/button{num}buttononClick{()

{dispatch(INCREMENT);}}/button/p/div);

export

Object.prototype.toString.call(fn)

[object

useState如何实现state改变时useEffect重新执行

实现useState的state和useEffect的双向绑定

function

问题如何实现隐式绑定如何知道执行getter时所对应的effect//

解法执行useEffect前将effect加入堆栈getter函数获取当前处于栈顶部的effect即为当前执行的上下文执行完之后移出堆栈if

(effectStack.length

debuggersub.execute();}};return

[getter,

每次执行都会先删除依赖cleanup(effect);effectStack.push(effect);//

{fn();}

III:使用set来存发布订阅的数据结构而不是list};execute();

}/***

找到useState的subs清理该effect(在别人那里清除自己的痕迹)for

(const

清理effect的depseffect.deps.clear();

}/***

{subs.add(effect);effect.deps.add(subs);

function

useState如何实现state数值改变之后如何触发UI的更新

在编译阶段AOT

用模板语法描述UI的框架可以从AOT中受益因为模板语法中“静态”部分可以和“动态”部分很轻易的分离

VDOM框架jsx描述UI的框架模板语法描述UI的框架blockdom

inferno

VDOM是什么虚拟DOM也是为了描述UI为了实现“自变量变化计算出UI变化”

VDOM什么用将元素描述的UI改成VDOM描述的UI通过比较VDOM的变化来计算UI的变化

VDOM好处

Svelte编译器在编译App/时直接追踪script标签中所有变量声明

一旦涉及count/count1等变量赋值的语句该变量就会被提取到instance函数中instance函数返回值作为组件的入参ctx

自变量变化时如何更新UI元素

dirty可以指定自变量和元素的变化关系set_data可以改dom

自变量变化时标记dirty调度更新fragment执行p方法p方法内的if语句直接和dirty标记对应执行set_data()

set_data函数会执行具体dom操作

编译时绑定UI和state的关系触发变化时标记dirty更新入参执行updateUI函数

等代码预先编译为create_fragment函数创建dom挂载更新等

function

每个组件都有一个watchEffect类似useEffect实现state变化时候自动执行watchEffect中回调函数

自变量变化执行render函数生成当前组件的VNode和上一次生成的prevNode一起作为patch函数的入参返回值为UI中变化的元素

watchEffect的回调函数中包括renderpatch一条龙

AOT如何帮助Vue3

}之后执行patch时只需要比对dynamicChildren即可

6.3

只要自变量改变就从根节点开始重新遍历应用找到diff执行dom

内部有优化机制

shouldComponentUpdatememoPureComponent等

前端框架总结