const KeepAlive = {
  //keepAlive组件独有的属性，用作标识
  __isKeepAlive: true,
  setup(props, { slots }) {
    //创建一个缓存对象
    //key:vnode.type
    //value:vnode
    const cache = new Map();
    //当前keepAlive组件的实例
    const instance = currentInstance;
    //对于KeepAlive组件来说，它的实例上有存在特殊的keepAliveCtx对象，该对象由渲染器注入
    //该对象会暴露渲染器得到一些内部方法，其中move函数用来将一段DOM移动到另一个容器中
    const { move, createElement } = instance.KeepAliveCtx;

    //创建隐藏容器
    const storageContainer = createElement("div");

    //keepAlive组件实例上会被添加两个内部函数，分别是_deActivate和_activate
    //这两个函数会在渲染器中被调用
    instance._deActivate = (vnode) => {
      move(vnode, storageContainer);
    };
    instance._activate = (vnode, container, anchor) => {
      move(vnode, container, anchor);
    };
    return () => {
      //keepAlive的默认插槽就是要被keepAlive的组件
      let rawVNode = slots.default();
      //如果不是组件，直接渲染，因为非组件的虚拟结点无法被keepAlive
      if (typeof rawVNode.type !== "object") {
        return rawVNode;
      }
      //在挂载时先获取缓存的组件vnode
      const cachedVNode = cache.get(rawVNode.type);
      if (cachedVNode) {
        //如果有缓存的内容，说明不应该执行挂载，应该执行激活
        //继承组件实例
        rawVNode.component = cachedVNode.component;
        //在vnode上添加keptAlive属性，标记为true,避免渲染器重新挂载
        rawVNode.keptAlive = true;
      } else {
        //如果没有缓存，则将其添加到缓存中，这样下次激活组件时不会执行新的挂载动作
        cache.set(rawVNode.type, rawVNode);
      }
      //在组件vnode上添加shouldKeepAlive属性，并标记为true,避免渲染器将组件卸载
      rawVNode.shouldKeepAlive = true;
      //将keepAlive组件的实例也添加到vNode上，以便在渲染器中访问
      rawVNode.KeepAliveInstance = instance;
      //渲染组件 vnode
      return rawVNode;
    };
  },
};

function unmount(vnode) {
    if(vnode.type === Fragment) {
        vnode.children.forEach(c=>unmount(c))
        return
    }else if(typeof vnode.type === 'object') {
        //vnode.shouldAlive是一个布尔值，用来标识该组件是否应该被KeepAlive
        if(vnode.shouldKeepAlive) {
            //对于需要被keppAlive的组件，我们不应该直接卸载，而应该调用该组件的父组件，即keepAlive的父组件_deActive函数使其失活
            vnode.KeepAliveInstance._deActivate(vnode)
        }else {
            unmount(vnode.component.subTree)
        }
        return
    }
    const parent = vnode.el.parentNode
    if(parent) {
        parent.removeChild(vnode.el)
    }
}

function patch(n1,n2,container,anchor) {
    if(n1 && n1.type !== n2.type) {
        unmount(n1)
        n1=null
    }
    const {type} = n2
    if(typeof type === 'string'){
        
    }else if(type === Text){

    }else if(type === Fragment){
        
    }else if(typeof type === 'object' || typeof type === 'function') {
        if(!n1) {
            //如果该组件已经被keepAlive,则不会重新挂载它，而是会调用_active来激活它
            if(n2.keptAlive){
                n2.keepAliveInstance._activate(n2,container,anchor)
            }else {
                mountComponent(n2,container,anchor)
            }
        }else {
            patchComponent(n1,n2,anchor)
        }
    }

}

//涉及move的函数由渲染器注入的
function mountComponent(vnode,container,anchor) {
    //...
    const instance = {
        state,
        props: shallowReactive(props),
        isMounted: false,
        subTree: null,
        slots,
        mounted: [],
        //只有KeepAlive组件的实例下会有keepAliveCtx属性
        keepAliveCtx: null
    }
    //检查当前要挂载的组件是否是KeepAlive组件
    const isKeepAlive = vnode.type.__isKeepAlive
    if(isKeepAlive) {
        //在KeepAlive组件实例上添加keepAliveCtx对象
        instance.keepAliveCtx = {
            //move函数用来移动一段vnode
            move(vnode,container,anchor) {
                //本质上是将组件渲染的内容移动到指定容器中，即隐藏容器中
                insert(vnode.component.subTree.el,container,anchor)
            },
            createElement
        }
    }//...
}

function Vue (options) {
if (process.env.NODE_ENV !== 'production' &&
  !(this instanceof Vue)
) {
  warn('Vue is a constructor and should be called with the `new` keyword')
}
this._init(options) //初始化各个功能
}

initLifecycle(vm)
  initEvents(vm)
  initRender(vm)
  callHook(vm, 'beforeCreate')
  initInjections(vm) // resolve injections before data/props
  initState(vm) //初始化
  initProvide(vm) // resolve provide after data/props
  callHook(vm, 'created') 

if (opts.props) initProps(vm, opts.props)//初始化Props
if (opts.methods) initMethods(vm, opts.methods)//初始化methods
if (opts.data) {
  initData(vm)} else {
  observe(vm._data = {}, true /* asRootData */)}//初始化data
if (opts.computed) initComputed(vm, opts.computed)//初始化computed

function myInstanceof(left,right) {
    let prototype = right.prototype
    left = left.__proto__
    while(true){
        if(!left)return false
        if(left == prototype)return true
        left = left.__proto__
    }
}

// mount时的Dispatcher
const HooksDispatcherOnMount: Dispatcher = {
  useCallback: mountCallback,
  useContext: readContext,
  useEffect: mountEffect,
  useImperativeHandle: mountImperativeHandle,
  useLayoutEffect: mountLayoutEffect,
  useMemo: mountMemo,
  useReducer: mountReducer,
  useRef: mountRef,
  useState: mountState,
  // ...省略
};

// update时的Dispatcher
const HooksDispatcherOnUpdate: Dispatcher = {
  useCallback: updateCallback,
  useContext: readContext,
  useEffect: updateEffect,
  useImperativeHandle: updateImperativeHandle,
  useLayoutEffect: updateLayoutEffect,
  useMemo: updateMemo,
  useReducer: updateReducer,
  useRef: updateRef,
  useState: updateState,
  // ...省略
};

current === null || current.memoizedState === null

ReactCurrentDispatcher.current =
    current === null || current.memoizedState === null ? HookDispatcherOnMount : HooksDispatcherOnUpdate

const hook: Hook = {
    memoizedState: null,
    baseState: null,
    baseQueue: null,
    queue: null,
    next: null
}

function effect(fn,options = {}) {
    const effectFn = () => {
        cleanup(effectFn)
        activeEffect = effectFn
        effectStack.push(effectFn)
        fn()
        effectStack.pop()
        activeEffect = effectStack[effectStack.length-1]
    }
    effectFn.options = options
    effectFn.deps = []
    //只有非lazy才执行
    if(!options.lazy) {
        effectFn()
    }
    //将副作用函数作为返回值返回
    return effectFn//新增
}

const effectFn = effect(()=>{
    console.log(obj.foo)
},{lazy:true})
//手动执行副作用函数
effectFn()

const effectFn = effect(
//getter返回obj.foo和obj.bar
    () => obj.foo + obj.bar,
    { lazy: true}
)

function effect(fn,options = {}){
    const effectFn = () => {
        cleanup(effectFn)
        activeEffect = effectFn
        effectStack.push(effectFn)
        //将fn执行结果存储到res
        const res = fn()
        effectStack.pop()
        activeEffect = effectStack[effectStack.length-1]
        //将res作为effectFn返回值
        return res;
    }
    effectFn.options = options
    effectFn.deps = []
    if(!options.lazy){
        effectFn()
    }
    return effectFn
}

function computed(getter) {
    //把getter作为副作用函数，创建一个lazy的effect
    const effectFn = effect(getter,{
        lazy: true
    })
    const obj = {
        //当读取value时才执行effectFn
        get value() {
            return effectFn()
        }
    }
    return obj
}

const data ={ foo: 1, bar: 2}
const obj = new Proxy(data, {...})
const sumRes = computed(() => obj.foo + obj.bar)
console.log(sumRes.value)//3

function computed(getter) {
    //value用来缓存上一次计算的值
    let value
    //dirty标志，用来标识是否需要重新计算值，为true意味着“脏”没需要计算
    let dirty = true
    const effectFn = effect(getter,{
        lazy:true
    })
    const obj = {
        get value(){
            //只有脏时才计算值，并将得到的值缓存到value
            if(dirty){
                value = effectFn()
                //将dirty设置为false,下一次访问直接使用缓存到value中的值
                dirty = false
            }
            return value
        }
    }
    return obj
}

const data = {foo: 1,bar: 2}
const obj = new Proxy(data,{...})
const sumRes = computed(() => obj.foo+obj.bar)
console.log(sumRes.value)//3
console.log(sumRes.value)//3
obj.foo++;
//再次访问得到的仍然是3
console.log(sumRes.value)//3

function computed(getter) {
    let value
    let dirty = true
    cont effectFn = effect(getter, {
        lazy: true,
        scheduler() {
            if(!dirty) {
                dirty = true
                //当计算属性依赖的响应式数据变化时，手动调用trigger函数触发响应
                trigger(obj,'value')
            }
        }
    })
    const obj = {
        get value() {
            if(dirty){
                value = effectFn()
                dirty = false
            }
            //当读取value手动调用track函数进行追踪
            track(obj,'value')
            return value
        }
    }
    return obj
}