延边州建设局网站,企云网站建设,营销必备十大软件,郑州网站优化培训机构#xff08;二#xff09;响应式原理
利用ES6中Proxy作为拦截器#xff0c;在get时收集依赖#xff0c;在set时触发依赖#xff0c;来实现响应式。
#xff08;三#xff09;手写实现
1、实现Reactive
基于原理#xff0c;我们可以先写一下测试用例 //reactive.spe…二响应式原理
利用ES6中Proxy作为拦截器在get时收集依赖在set时触发依赖来实现响应式。
三手写实现
1、实现Reactive
基于原理我们可以先写一下测试用例 //reactive.spec.tsdescribe(effect, () {it(happy path, () {const original { foo: 1 }; //原始数据const observed reactive(original); //响应式数据expect(observed).not.toBe(original);expect(observed.foo).toBe(1); //正常获取数据expect(isReactive(observed)).toBe(true);expect(isReactive(original)).toBe(false);expect(isProxy(observed)).toBe(true);});});首先实现数据的拦截处理通过ES6的Proxy实现获取和赋值操作。 //reactive.ts//对new Proxy()进行包装export function reactive(raw) {return createActiveObject(raw, mutableHandlers);}function createActiveObject(raw: any, baseHandlers) {//直接返回一个Proxy对象实现响应式return new Proxy(raw, baseHandlers);}//baseHandler.ts//抽离出一个handler对象export const mutableHandlers {get:createGetter(),set:createSetter(),};function createGetter(isReadOnly: Boolean false, shallow: Boolean false) {return function get(target, key) {const res Reflect.get(target, key);// 看看res是否是一个objectif (isObject(res)) {//如果是则进行嵌套处理,使得返回的对象中的 对象 也具备响应式return isReadOnly ? readonly(res) : reactive(res);}if (!isReadOnly) {//如果不是readonly类型则收集依赖track(target, key);}return res;};}function createSetter() {return function set(target, key, value) {const res Reflect.set(target, key, value);//触发依赖trigger(target, key);return res;};}从上述代码中我们可以⚠️注意到track(target, key) 和trigger(target, key) 这两个函数分别是对依赖的收集和触发。 依赖我们可以把依赖认为是把用户对数据的操控用户函数副作用函数包装成一个东西我们在get的时候将依赖一个一个收集起来set的时候全部触发即可实现响应式效果。 2、实现依赖的收集和触发 //effect.ts//全局变量let activeEffect: ReactiveEffect; //当前的依赖let shouldTrack: Boolean; //是否收集依赖const targetMap new WeakMap(); //依赖树targetMap结构 targetMap: { 每一个targetdepsMap{ 每一个keydepSet[ 每一个依赖 ] } } WeakMap和Map的区别 1、WeakMap只接受对象作为key如果设置其他类型的数据作为key会报错。 2、WeakMap的key所引用的对象都是弱引用只要对象的其他引用被删除垃圾回收机制就会释放该对象占用的内存从而避免内存泄漏。 3、由于WeakMap的成员随时可能被垃圾回收机制回收成员的数量不稳定所以没有size属性。 4、没有clear()方法 5、不能遍历 参考 前端进阶面试题详细解答
首先我们定义一个依赖类称为ReactiveEffect对用户函数进行包装赋予一些属性和方法。 //effect.ts//响应式依赖 — ReactiveEffect类class ReactiveEffect {private _fn: any; //用户函数active true; //表示当前依赖是否激活如果清除过则为falsedeps: any[] []; //包含该依赖的depsonStop?: () void; //停止该依赖的回调函数public scheduler: Function; //调度函数//构造函数constructor(fn, scheduler?) {this._fn fn;this.scheduler scheduler;}//执行副作用函数run() {//用户函数可以报错需要用try包裹try {//如果当前依赖不是激活状态不进行依赖收集直接返回if (!this.active) {return this._fn();}//开启依赖收集shouldTrack true;activeEffect this;//调用时会触发依赖收集const result this._fn();//关闭依赖收集shouldTrack false;//返回结果return result;} finally {//todo}}}effect影响函数
创建一个用户函数作用函数称为effect这个函数的功能为基于ReactiveEffect类创建一个依赖触发用户函数的时候触发依赖收集返回用户函数。 //创建一个依赖export function effect(fn, option: any {}) {//为当前的依赖创建响应式实例const _effect new ReactiveEffect(fn, option.scheduler);Object.assign(_effect, option);//最开始调用一次,其中会触发依赖收集 _effect.run() - _fn() - get() - track()_effect.run();const runner: any _effect.run.bind(_effect);//在runner上挂载依赖方便在其他地方通过runner访问到该依赖runner.effect _effect;return runner;}bind()在原函数的基础上创建一个新函数使新函数的this指向传入的第一个参数其他参数作为新函数的参数 用户触发依赖收集时将依赖添加到targetMap中。
收集/添加依赖 //把依赖添加到targetMap对应target的key中在重新set时在trigger中重新触发export function track(target: Object, key) {//如果不是track的状态直接返回if (!isTracking()) return;// target - key - dep//获取对应target获取不到则创建一个并加进targetMap中let depsMap targetMap.get(target);if (!depsMap) {targetMap.set(target, (depsMap new Map()));}//获取对应key获取不到则创建一个并加进target中let depSet depsMap.get(key);if (!depSet) {depsMap.set(key, (depSet new Set()));}//如果depSet中已经存在该依赖直接返回if (depSet.has(activeEffect)) return;//添加依赖trackEffects(depSet);}export function trackEffects(dep) {//往target中添加依赖dep.add(activeEffect);//添加到当前依赖的deps数组中activeEffect.deps.push(dep);}触发依赖 //一次性触发对应target中key的所有依赖export function trigger(target, key) {let depsMap targetMap.get(target);let depSet depsMap.get(key);//触发依赖triggerEffects(depSet);}export function triggerEffects(dep) {for (const effect of dep) {if (effect.scheduler) {effect.scheduler();} else {effect.run();}}}3、移除/停止依赖
我们在ReactiveEffect这个类中增加一个stop方法来暂停依赖收集和清除已经存在的依赖 //响应式依赖 — 类class ReactiveEffect {private _fn: any; //用户函数active true; //表示当前依赖是否激活如果清除过则为falsedeps: any[] []; //包含该依赖的depsonStop?: () void; //停止该依赖的回调函数public scheduler: Function; //调度函数//...stop() {if (this.active) {cleanupEffect(this);//执行回调if (this.onStop) {this.onStop();}//清除激活状态this.active false;}}}//清除该依赖挂载的deps每一项中的该依赖function cleanupEffect(effect) {effect.deps.forEach((dep: any) {dep.delete(effect);});effect.deps.length 0;}//移除一个依赖export function stop(runner) {runner.effect.stop();}四衍生类型
1、实现readonly
readonly相比于reactive实现上相对比较简单它是一个只读类型不会涉及set操作更不需要收集/触发依赖。 export function readonly(raw) {return createActiveObject(raw, readonlyHandlers);}export const readonlyHandlers {get: readonlyGet,set: (key, target) {console.warn(key:${key} set 失败因为target是一个readonly对象, target);return true;},};const readonlyGet createGetter(true);function createGetter(isReadOnly: Boolean false, shallow: Boolean false) {return function get(target, key) {if (key ReactiveFlags.IS_REACTIVE) {return !isReadOnly;} else if (key ReactiveFlags.IS_READONLY) {return isReadOnly;}//...// 看看res是否是一个objectif (isObject(res)) {return isReadOnly ? readonly(res) : reactive(res);}if (!isReadOnly) {//收集依赖track(target, key);}return res;};}2、实现shallowReadonly
我们先看一下shallow的含义 shallow不深的, 浅的不深的, 不严肃的, 肤浅的浅薄的。 那么shallowReadonly指的是只对最外层进行限制而内部的仍然是一个普通的、正常的值。 //shallowReadonly.tsexport function shallowReadonly(raw) {return createActiveObject(raw, shallowReadonlyHandlers);}export const shallowReadonlyHandlers extend({}, readonlyHandlers, {get: shallowReadonlyGet,});const shallowReadonlyGet createGetter(true, true);function createGetter(isReadOnly: Boolean false, shallow: Boolean false) {return function get(target, key) {//..const res Reflect.get(target, key);//是否shallow,是的话很直接返回if (shallow) {return res;}if (isObject(res)) {//...}};}3、实现ref
ref相对reactive而言实际上他不存在嵌套关系就是一个value。 //ref.tsexport function ref(value: any) {return new RefImpl(value);}我们来实现一下RefImpl类原理其实跟reactive类似只是一些细节处不同。 //ref.tsclass RefImpl {private _value: any; //转化后的值public dep; //依赖容器private _rawValue: any; //原始值public _v_isRef true; //判断ref类型constructor(value) {this._rawValue value; //记录原始值this._value convert(value); //存储转化后的值this.dep new Set(); //创建依赖容器}get value() {trackRefValue(this); //收集依赖return this._value;}set value(newValue) {//新老值不同才触发更改if (hasChanged(newValue, this._rawValue)) {// 一定先修改value再触发依赖this._rawValue newValue;this._value convert(newValue);triggerEffects(this.dep);}}}//ref.ts//对value进行转换value可能是objectexport function convert(value: any) {return isObject(value) ? reactive(value) : value;}export function trackRefValue(ref: RefImpl) {if (isTracking()) {trackEffects(ref.dep);}}//effect.tsexport function isTracking(): Boolean {//是否开启收集依赖 是否有依赖return shouldTrack activeEffect ! undefined;}export function trackEffects(dep) {dep.add(activeEffect);activeEffect.deps.push(dep);}export function triggerEffects(dep) {for (const effect of dep) {if (effect.scheduler) {effect.scheduler();} else {effect.run();}}}实现proxyRefs //实现对ref对象进行代理//如user {// age:ref(10),// ...//}export function proxyRefs(ObjectWithRefs) {return new Proxy(ObjectWithRefs, {get(target, key) {// 如果是ref 返回.value//如果不是 返回valuereturn unRef(Reflect.get(target, key));},set(target, key, value) {if (isRef(target[key]) !isRef(value)) {target[key].value value;return true; //?} else {return Reflect.set(target, key, value);}},});}4、实现computed
computed的实现也很巧妙利用调度器机制和一个私有变量_value实现缓存和惰性求值。
通过注解一二三可理解其实现流程 //computedimport { ReactiveEffect } from ./effect;class computedRefImpl {private _dirty: boolean true;private _effect: ReactiveEffect;private _value: any;constructor(getter) {//创建时会创建一个响应式实例并且挂载this._effect new ReactiveEffect(getter, () {//三//当监听的值发生改变时会触发set此时触发当前依赖//因为存在调度器不会立刻执行用户fn实现了lazy而是将_dirty更改为true//在下一次用户get时会调用run方法重新拿到最新的值返回if (!this._dirty) {this._dirty true;}});}get value() {//一//默认_dirty是true//那么在第一次get的时候会触发响应式实例的run方法触发依赖收集//同时拿到用户fn的值存储起来然后返回出去if (this._dirty) {this._dirty false;this._value this._effect.run();}//二//当监听的值没有改变时_dirty一直为false//所以第二次get时因为_dirty为false那么直接返回存储起来的_valuereturn this._value;}}export function computed(getter) {//创建一个computed实例return new computedRefImpl(getter);}五工具类 //是否是reactive响应式类型export function isReactive(target) {return !!target[ReactiveFlags.IS_REACTIVE];}//是否是readonly响应式类型export function isReadOnly(target) {return !!target[ReactiveFlags.IS_READONLY];}//是否是响应式对象export function isProxy(target) {return isReactive(target) || isReadOnly(target);}//是否是对象export function isObject(target) {return typeof target object target ! null;}//是否是refexport function isRef(ref: any) {return !!ref._v_isRef;}//解构refexport function unRef(ref: any) {return isRef(ref) ? ref.value : ref;}//是否改变export const hasChanged (val, newVal) {return !Object.is(val, newVal);};判断响应式类型的依据是在get的时候检查传进来的key是否等于某枚举值来做为判断依据在get中加入 //reactive.tsexport const enum ReactiveFlags {IS_REACTIVE __v_isReactive,IS_READONLY __v_isReadOnly,}//baseHandler.tsfunction createGetter(isReadOnly: Boolean false, shallow: Boolean false) {return function get(target, key) {//...if (key ReactiveFlags.IS_REACTIVE) {return !isReadOnly;} else if (key ReactiveFlags.IS_READONLY) {return isReadOnly;}//...};}
