三乡网站建设,网上推销产品的软件,沈阳seo排名优化教程,企业网络维护阅读前须知 本文是笔者学习卡颂的《React设计原理》的读书笔记#xff0c;对书中有价值内容以QA方式进行呈现#xff0c;同时结合了自己的理解#x1f914;阅读时推荐先看问题#xff0c;想想自己的答案#xff0c;再和答案比对一下本文属于前端框架科普#xff0c;… 阅读前须知 本文是笔者学习卡颂的《React设计原理》的读书笔记对书中有价值内容以QA方式进行呈现同时结合了自己的理解阅读时推荐先看问题想想自己的答案再和答案比对一下本文属于前端框架科普读完快速对前端框架有个概览 文章目录前端框架原理概览1 react是库还是前端框架框架和库有啥区别2 如何理解前端框架的原理UI f(state)3 如何同时描述UI和逻辑4 组件是存放UI和逻辑的松耦合单元那么组件如何组织UI和逻辑5 数据如何在组件间传递6 前端框架分类7 如何理解reduce和reducer8 useReducer如何使用和useState有什么关系区别如何利用useReducer实现一个useState9 react hooks中的自变量和因变量前端框架使用的主流技术1 useState如何实现state改变时useEffect重新执行2 useState如何实现state数值改变之后如何触发UI的更新3 AOT和JIT有什么区别4 利用AOT的框架多适用于模板语法描述UI的框架solid svelte5 VDOM框架jsx描述UI的框架模板语法描述UI的框架blockdom inferno6 前端框架实现原理 6.1 元素级框架 svelteAOT6.2 Vue3原理组件级框架6.3 React原理应用级框架前端框架总结前端框架原理概览
1 react是库还是前端框架框架和库有啥区别
react本身是构建UI的库将其称为框架是约定俗称的说法其实不是框架
2 如何理解前端框架的原理UI f(state)
框架f就是一个函数自变量state是当前数据因变量是宿主环境的视图 ● state: 当前数据 ● f框架内部运行机制 ○ 根据自变量的变化计算出UI的变化 ○ 根据UI变化执行宿主环境的API ● UI宿主环境的视图
3 如何同时描述UI和逻辑 4 组件是存放UI和逻辑的松耦合单元那么组件如何组织UI和逻辑
state数据自变量 f函数是逻辑 UI因变量 yf(x) 自变量x的变化可能会导致依赖x的因变量y的变化
const App () {const [count, setCount] useState(0);// 自变量count改变导致因变量y1改变纯函数const y1 useMemo(()count*2,[count]);// 有副作用useEffect((){document.titlenew title;console.log(副作用);},[])}5 数据如何在组件间传递 当前组件的自变量或者因变量借助于UI传递给子组件作为其自变量 子组件自身的自变量称为state 其他组件传递的自变量称为props
6 前端框架分类 7 如何理解reduce和reducer
reduce函数式编程当中的一个术语reduce操作被称为Fold折叠
// 数组中的reduce函数第一个参数通常被称为reducer
const sum [0, 1, 2].reduce((prev, item) {return prev item;
}, 0)拿JavaScript来理解。reduce属于一种高阶函数它将其中的回调函数reducer递归应用到数组的所有元素上并返回一个独立的值。这也就是“缩减”或“折叠”的意义所在了。
reducer(state, action) newState
redux中的reducer函数是因为它的入参和返回值都非常类似于arr的reduce中传入的回调函数
// reducer接收两个参数 state[], action
// reducer返回值是一个新的state
const todoReducer (state[], action) {switch(action){case ADD:return [...state, {id: 111}];default:return state;}
}8 useReducer如何使用和useState有什么关系区别如何利用useReducer实现一个useState
● useRedcuer是useState的替换方案和useState相比它更适合state逻辑复杂或者state是个对象包含多个子值或者下一个state依赖于之前的stated的情况。相当于收敛逻辑于reducer函数中进行管理 ● useReducer使用
const reducer (state, action) {switch (action) {case INCREMENT:return state 1;case DECREMENT:return state - 1;default:return state;}
};function Reducer() {const [num, dispatch] useReducer(reducer, 1);return (divpuseStateByReducer :buttononClick{() {// 区分dispatch函数和reducer函数dispatch(DECREMENT);}}-/button{num}buttononClick{() {dispatch(INCREMENT);}}/button/p/div);
}
export default Reducer;● 用useReducer实现一个useState
import { useReducer, useRef } from react;const isFunction (fn) {return Object.prototype.toString.call(fn) [object Function];
};export default (initialState) {const reducer (state, action) {return isFunction(action) ? action(state) : action;};return useReducer(reducer, initialState);
};9 react hooks中的自变量和因变量 前端框架使用的主流技术
1 useState如何实现state改变时useEffect重新执行
细粒度更新依赖追踪技术如何实现的 实现useState的state和useEffect的双向绑定
function useState(value?: any) {/*** 问题state绑定的不是回调函数而是数据结构* 解法创建一个数据结构effect{execute: () {}, deps: [subs1, subs2],}*/const subs: SetEffect new Set();const getter () {// 问题如何实现隐式绑定如何知道执行getter时所对应的effect// 解法执行useEffect前将effect加入堆栈getter函数获取当前处于栈顶部的effect即为当前执行的上下文执行完之后移出堆栈if (effectStack.length 0) {const curEffect effectStack[effectStack.length - 1];subscribe(subs, curEffect);}return value;};const setter (newValue?) {value newValue;// emitfor (const sub of [...subs]) {console.log(setter emit subs);// debuggersub.execute();}};return [getter, setter];
}*** 创建一个的useEffect* 1 不需要显示指定依赖* 2 useEffect执行后回调函数自动执行* 3 依赖变化时useEffect自动执行*/
function useEffect(fn) {const execute () {// 每次执行都会先删除依赖cleanup(effect);effectStack.push(effect);// 首次会执行一次回调来触发“自动依赖收集”try {fn();} finally {effectStack.pop();}};const effect {execute,deps: new SetSetEffect(), // III:使用set来存发布订阅的数据结构而不是list};execute();
}/*** 双向删除订阅关系* param effect*/
function cleanup(effect: Effect) {// console.log(cleanup, effect);// 找到useState的subs清理该effect(在别人那里清除自己的痕迹)for (const subs of [...effect.deps]) {subs.delete(effect);}// 清理effect的depseffect.deps.clear();
}/*** 双向订阅* param subs* param effect*/
function subscribe(subs, effect) {subs.add(effect);effect.deps.add(subs);
}
useMemo是useEffect包了一层
function useMemo(fn) {const [state, setState] useState();useEffect(() setState(fn()));return state();
}2 useState如何实现state数值改变之后如何触发UI的更新
在编译阶段AOT 在运行阶段VDOM
3 AOT和JIT有什么区别 4 利用AOT的框架多适用于模板语法描述UI的框架solid svelte
用模板语法描述UI的框架可以从AOT中受益因为模板语法中“静态”部分可以和“动态”部分很轻易的分离 从而减少框架在“自变量变化计算出UI变化”这部分工作量
5 VDOM框架jsx描述UI的框架模板语法描述UI的框架blockdom inferno
VDOM是什么虚拟DOM也是为了描述UI为了实现“自变量变化计算出UI变化” VDOM什么用将元素描述的UI改成VDOM描述的UI通过比较VDOM的变化来计算UI的变化 VDOM好处 ● 真实DOM元素冗余属性较多没必要全部进行比较减少内存开销 ● 描述能力强大 ● 可以多平台渲染
6 前端框架实现原理
6.1 元素级框架 svelteAOT
Q: 如何建立自变量和UI元素的对应关系 编译器编译时绑定update方法和入参 Svelte编译器在编译App/时直接追踪script标签中所有变量声明 一旦涉及count/count1等变量赋值的语句该变量就会被提取到instance函数中instance函数返回值作为组件的入参ctx
Q: 自变量变化时如何更新UI元素 更新流程开始于元素编译时已经绑定了具体元素 dirty可以指定自变量和元素的变化关系set_data可以改dom 自变量变化时标记dirty调度更新fragment执行p方法p方法内的if语句直接和dirty标记对应执行set_data() set_data函数会执行具体dom操作
编译时绑定UI和state的关系触发变化时标记dirty更新入参执行updateUI函数 等代码预先编译为create_fragment函数创建dom挂载更新等 将state作为组件create_fragment的入参 function create_fragment(ctx) {let h1;let t;let dispose;return {c() {h1 element(h1);t text(/*count*/ ctx[0]);},m(target, anchor) {insert(target, h1, anchor);append(h1, t);// 在mount时候绑定dom元素事件回调函数dispose listen(h1, click, /*update1*/ ctx[1]);},p(ctx, [dirty]) {// count变元素h1的t变建立了自变量和元素的对应关系if (dirty /*count*/ 1) set_data(t, /*count*/ ctx[0]);},i: noop,o: noop,d(detaching) {if (detaching) detach(h1);dispose();}};
}// ctx 执行上下文 包括state和改变state的行为以及回调函数
function instance($$self, $$props, $$invalidate) {let count 0;function update1() {// 触发ctx更新,dirty标记$$invalidate(0, count, count);}setTimeout(() {$$invalidate(0, count, count);},1000);return [count, update1];
}6.2 Vue3原理组件级框架
● 如何建立自变量和UI组件的对应关系 ○ 细粒度更新 ○ 每个组件都有一个watchEffect类似useEffect实现state变化时候自动执行watchEffect中回调函数 ● 自变量变化时如何更新元素更新流程开始于组件 ○ 自变量变化执行render函数生成当前组件的VNode和上一次生成的prevNode一起作为patch函数的入参返回值为UI中变化的元素 watchEffect的回调函数中包括renderpatch一条龙 AOT如何帮助Vue3
divh1hello/h1p{{name}}/p
/divAOT后识别模板代码标记可能发生变化的量
const render (_ctx, cache) {return(_openBlock(), _createElementBlock(div, null, [_createElementVNode(h1, null, helllo),// patchFlag 为1 表示变化的元素为text, 2表示class_createElementVNode(p, null, _ctx.name, 1 /* TEXT*/)]))
}
// 生成的VNode大致表示成
const vnode {tag: div,children: [{tag: h1, children: hello},{tag: p, children: ctx.name, patchFlag: 1}],dynamicChildren:[{tag: p, children: ctx.name, patchFlag: 1} ]
}之后执行patch时只需要比对dynamicChildren即可
6.3 React原理应用级框架
● 如何建立自变量和UI元素的对应关系 ○ 不需要建立 ● 自变量变化时如何更新元素 ○ 只要自变量改变就从根节点开始重新遍历应用找到diff执行dom
● react每次自变量变化都会从根节点遍历应用会不会性能差 不会 ○ 内部有优化机制 ○ 提供一些优化api减少不必要的遍历: shouldComponentUpdatememoPureComponent等
前端框架总结
