当数据一变,就会触发对应的effect,然后重新调render重新渲染
第一步
首先我们需要处理一个事件里重复修改同一个值多次更新的问题,我们需要降低更新频率
我们在创建effect让render执行的时候,传入第二个参数scheduler
这个时候,更新时就可以走我们自己的写的方法里,不会走effect参数里的函数,这点可能大家有点疑惑,我再贴那段源码里的代码
- effect触发的时候会先判断是否有scheduler,有就执行,否则才会去执行回调函数
第二步
我们希望有一个调度方法,把这些effect先去重,然后再去执行effect
queneJob方法
- 如果队列里没有,则push进队列
- 然后刷新队列,调用queneFlush
queneFlush方法
- 设置个变量,标识是否正在刷新中
- 判断如果不是正在刷新中,则变量改成true
- 你不断的调queneFlush,只有第一次能进来
- 条件内部的promise会等待当前工作都执行后,再去调then,我们在then里去清空任务,调用flushJobs
flushJobs方法
- 把标识当前正在刷新的变量赋值回false
- 然后我们在这里面希望保证先刷新父,再刷新子,和渲染的顺序是一样的,我们需要对队列进行排序,利用effect上的id
- 排完序后让队列里的effect依次执行
至此,我们解决了多次调用更新的问题
如果您觉得有所收获,麻烦动动小手点个攒,谢谢啦~ 预知后事如何,且听下回分解~