【vue设计与实现】响应系统的作用与实现 4-避免无限递归循环&调度执行

避免无限递归循环

看下面的例子：

const data = {foo:1}
const obj = new Proxy(data,{/*...*/})

effect(()=>obj.foo++)

可以看到这里有个自增操作obj.foo++，该操作会引起栈溢出：
Uncaught RangeError: Maximum call stack size exceded

下面来搞清楚这个问题是为什么。
实际上，把obj.foo++这个操作分开来看，相当于：

effect(()=>{
	obj.foo = obj.foo + 1
})

这里机会读取obj.foo的值，又会设置obj.foo的值，这就是导致这个问题的原因。这里代码的执行流程如下：
首先读取obj.foo的值，触发track操作，将当前副作用函数收集到“桶”中；
接着加1赋值给obj.foo，此时会触发trigger操作，即把“桶”中的副作用函数取出并执行。
但问题是该副作用函数正在执行，还没有执行完，就要开始下一次的执行。这样就会导致无限递归地调用自己，于是就产生了栈溢出。

这里可以观察发现，读取和设置操作是在同一个副作用函数内进行的。此时track收集的和trigger要触发的都是activeEffect。要解决这个问题，我们可以在trigger动作发生时增加守卫条件。
如果trigger所执行的副作用函数与当前正在执行的副作用函数相同，则不触发执行。代码如下：

function trigger(target, key){
	const depsMap = bucket.get(target)
	if(!depsMap) return
	const effects = depsMap.get(key)

	const effectsTorRun = new Set()
	effeects && effects.forEach(effecetFn => {
		// 如果trigger触发执行的副作用与当前正在执行的副作用函数相同，则不触发执行
		if (effectFn != activeEffect){
			effectsToRun.add(effectFn)
		}
	})
	effectsToRun.forEach(effectFn => effectFn())
}

这样就能避免无限递归调用，从而避免栈溢出

调度执行

可调度性指的是trigger动作触发副作用函数重新执行时，有能力决定副作用函数执行的时机，次数的方式。

首先来看，如何决定副作用函数的执行方式，以下面的代码为例：

const data = {foo:1}
const obj = new Proxy(data,{/*...*/})
effect(()=>{
	console.log(obj.foo)
})
obj.foo++
console.log('结束了')

这段代码的输出结果如下：
1
2
‘结束了’

现在假设需求有变，输出顺序调整为：
1
‘结束了’
2

调整代码执行顺序可以很简单的解决这个问题，但是有没有办法在不调整代码执行顺序就实现需求的。这时就需要响应系统支持调度。

可以为effect函数设计一个选项参数options,允许用户指定调度器，如下：

effect{
	() => {
		console.log(obj.foo)
	},
	// options
	{
		// 调度器 scheduler是一个函数
		scheduler(fn){
			// ...
		}
	}
}

用户在调用effect时，可以传递第二个参数options，options是一个对象，其中允许指定scheduler调度函数；
同时在effect函数内部需要把options选项挂载到对应的副作用函数上。

function effect(fn, options = {}){
	const effectFn = () => {
		cleanup(effectFn)
		activeEffect = effectFn
		effectStack.push(effectFn)
		fn()
		effectStack.pop()
		activeEffect = effectStack[effectStack.length - 1]
	}
	// 将 options 挂载到 effectFn上
	effectFn.options = options
	effectFn.deps = []
	// 执行副作用函数
	effectFn()
	
}

有了调度函数，就可以在trigger函数中触发副作用函数重新执行时，直接调用用户出传递的调度器函数，从而把控制权交给用户：

function trigger(target, key){
	const depsMap = bucket.get(target)
	if(!depsMap) return
	const effects = depsMap.get(key)

	const effectsToRun = new Set()
	effeects && effects.forEach(effecetFn => {
		// 如果trigger触发执行的副作用与当前正在执行的副作用函数相同，则不触发执行
		if (effectFn != activeEffect){
			effectsToRun.add(effectFn)
		}
	})
	effectsToRun.forEach(effectFn => {
		// 如果一个副作用函数存在调度器，则调用该调度器，并将副作用函数作为参数传递
		if(effectFn.options.scheduler){
			effectFn.options.scheduler(effectFn)
		}else{
			// 否则直接执行副作用函数（之前的默认行为）
			effectFn()
		}
	})
}

注意要把当前副作用函数作为参数传递到调度器中

有了这些，就可以实现前文的需求了，如下代码：

const data = {foo:1}
const obj = new Proxy(data,{/*...*/})
effect{
	() => {
		console.log(obj.foo)
	},
	// options
	{
		// 调度器 scheduler是一个函数
		scheduler(fn){
			// 将副作用函数放到宏任务队列中执行
			setTimeout(fn)
		}
	}
}
effect(()=>{
	console.log(obj.foo)
})
obj.foo++
console.log('结束了')

这里使用setTimeout开启一个宏任务执行副作用函数fn，这样就能改变代码执行顺序。

除了控制副作用函数的执行顺序，通过调度器还可以做到控制它的执行次数，这一点也尤为重要。看下面例子：

const data = { foo: 1 }
const obj = new Proxy(data, { /*...*/})

effect(()=>{
	console.log(obj.foo)
})

obj.foo++
obj.foo++

在没有指定调度器的情况下，输出如下：
1
2
3

如果我们只关心最终结果而不关心过程，那么执行三次打印操作是多余的，我们期望的打印结果是：
1
3

基于调度器我们可以很容易地实现此功能

// 定义一个任务队列
const jobQueue = new Set()
// 使用Promise.resolve()创建一个promise实例，我们用它将一个任务添加到任务队列
const p = Promise.resolve()

// 一个标志代表是否在刷新队列
let isFlushing = false
function flushJob(){
	// 如果队列在刷新就什么都不做
	if(isFlushing) return
	// 设置为true,代表正在刷新
	isFlushing = true
	// 在微任务队列中刷新jobQueue队列
	p.then(()=>{
		jobQueue.forEach(job=>job())
	}).finally(()=>{
		//结束后重置 isFlushing
		isFlushing = false
	})
}

effect(()=>{
	console.log(obj.foo)
}, {
	scheduler(fn){
		//每次调度时，将副作用函数添加到jobQueue队列中
		jobQueue.add(fn)
		// 调用flushJob刷新队列
		flushJob()
	}
})

obj.foo++
obj.foo++

整段代码的效果是，连续对obj.foo执行两次自增操作，会同步且连续执行两次scheduler调度函数，也就是同一个副作用函数会被jobQueue.add(fn)添加两次，但由于Set数据结构的去重能力，最终jobQueue中只会有一项，就是当前的副作用函数。
类似地，flushJob也会同步且连续执行两次，但由于isFlushing，实际上flushJob函数在一个事件循环内只会执行一次，即在微任务内执行一次。
当微任务队列开始执行时，就会遍历jobQueue并执行里面存储的副作用函数，由于此时jobQueue队列内只有一个副作用函数，所以只会执行一次，并且当它执行时，字段obj.foo的值已经是3了，这样就实现期望的功能了。
实际上Vue.js内部实现了一个更加完善的调度器，思路和上文的相同。

知识扩展：
Promise的resolve()方法可直接返回Promise成功对象，把一个普通对象转为Promise对象

resolve()实现

// 类方法Promise.resolve
// 普通的值
const promise = Promise.resolve({ name: "swh" })
// 相当于
// const promise2 = new Promise((resolve, reject) => {
//   resolve({ name: "swh" })
// })
 
promise.then(res => {
  console.log("res:", res)    //res: { name: 'why' }
})

更多内容参考：https://es6.ruanyifeng.com/#docs/promise#Promise-resolve