十五、「深入React源码」--- 手写实现Hook之useLayoutEffect

一、事件循环

前文说到，大多数情况下，effect 不需要同步地执行。在个别情况下（例如测量布局），有单独的 useLayoutEffect 可以使用。两者的区别在哪里呢？

• useEffect：先渲染页面，后监听到DOM变化，再次渲染。不阻塞页面。
• useLayoutEffect：先监听到DOM变化，先计算出最终的DOM，然后一次性渲染。

二、useLayoutEffect

实现思路和useEffect完全一致，唯一区别就是useEffect需要 开启新的宏任务 来确保延迟执行，而useLayoutEffect则在 微任务队列 保持先行。

三、useRef

useRef同类组件的ref类似，返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数。返回的 ref 对象在组件的整个生命周期内保持不变。 因此，在编写时，current属性设置默认值为null，等待操作再次赋值即可，

四、useImperativeHandle

useImperativeHandle 可以在使用 ref 时自定义暴露给父组件的实例值。在大多数情况下，应当避免使用 ref 这样的命令式代码。useImperativeHandle 应当与 forwardRef一起使用。

React.useImperativeHandle(ref, function);

五、实现

1. src/index.js

1-1. src/index.js(useLayoutEffect)

import React from "./react";
import ReactDOM from "./react-dom";

function Animation() {
  const ref = React.useRef();
  React.useLayoutEffect(() => {
    ref.current.style.transform = `translate(500px)`;
    ref.current.style.transition = `all 500ms`;
  });

  let style = {
    width: "100px",
    height: "100px",
    borderRadius: "50%",
    backgroundColor: "red",
  };

  return <div style={style} ref={ref}></div>;
}

ReactDOM.render(<Animation />, document.getElementById("root"));

1-2. src/index.js(useRef、useImperativeHandle)

import React from "./react";
import ReactDOM from "./react-dom";

function Child(props, ref) {
  const inputRef = React.useRef();
  React.useImperativeHandle(ref, () => ({
    focus() {
      inputRef.current.focus();
    },
  }));
  return <input type="text" ref={inputRef} />;
}

const ForwardChild = React.forwardRef(Child);

function Parent() {
  let [number, setNumber] = React.useState(0);
  const inputRef = React.useRef();
  function getFocus() {
    console.log(inputRef.current);
    inputRef.current.value = "focus";
    inputRef.current.focus();
  }

  return (
    <div>
      <ForwardChild ref={inputRef} />
      <button onClick={getFocus}>获得焦点</button>
      {/* <p>{number}</p>
      <button
        onClick={() => {
          debugger;
          setNumber(number + 1);
        }}
      >
        +
      </button> */}
    </div>
  );
}
ReactDOM.render(<Parent />, document.getElementById("root"));

2. src/react.js

import { wrapToVdom, shallowEqual } from "./utils";
import { Component } from "./component";
import {
  REACT_FORWARD_REF,
  REACT_ELEMENT,
  REACT_PROVIDER,
  REACT_CONTEXT,
  REACT_MEMO,
} from "./constants";
import {
  useState,
  useMemo,
  useCallback,
  useReducer,
  useEffect,
> > >   useLayoutEffect,
} from "./react-dom";

function createElement(type, config, children) {
  //children永远都是数组
  let ref, key;
  if (config) {
    delete config.__source; // source：bable编译时产生的属性
    delete config.__self;
    ref = config.ref; // ref可以用来引用这个真实DOM元素
    key = config.key; // 用来进行DOM-DIFF优化的，是用来唯一标识某个子元素的
    delete config.ref;
    delete config.key;
  }
  let props = { ...config };
  if (arguments.length > 3) {
    // 如果入参多余3个，说明有多个子元素，截取后，以数组形式保存
    props.children = Array.prototype.slice.call(arguments, 2).map(wrapToVdom);
  } else if (arguments.length === 3) {
    props.children = wrapToVdom(children); // 可能是React元素对象，也可能是string/number/null/und
  }
  return {
    $$typeof: REACT_ELEMENT,
    type,
    ref,
    key,
    props,
  };
}

function createRef() {
  // current属性的值：是等ref属性所在的原生dom元素变成真实dom后，把真实dom的地址赋给了current
  return { current: null };
}

/**
 * 接收转发ref的函数组件
 * @param {*} render 函数组件
 */
function forwardRef(render) {
  return {
    $$typeof: REACT_FORWARD_REF,
    render,
  };
}

function createContext() {
  let context = { $$typeof: REACT_CONTEXT };
  context.Provider = {
    $$typeof: REACT_PROVIDER,
    _context: context,
  };
  context.Consumer = {
    $$typeof: REACT_CONTEXT,
    _context: context,
  };
  return context;
}

function cloneElement(oldElement, props, children) {
  // 同createElement
  if (arguments.length > 3) {
    props.children = Array.prototype.slice.call(arguments, 2).map(wrapToVdom);
  } else if (arguments.length === 3) {
    props.children = wrapToVdom(children);
  }
  // 把新的属性，覆盖老的属性
  return { ...oldElement, props };
}

class PureComponent extends Component {
  shouldComponentUpdate(nextProps, nextState) {
    // 如果属性不相等 或状态不相等，说明需要更新，就返回true
    return (
      !shallowEqual(this.props, nextProps) ||
      !shallowEqual(this.state, nextState)
    );
  }
}

/**
 *
 * @param {} type 类型 函数组件
 * @param {} compare 比较方法 默认shallowEqual
 * @returns
 */
function memo(type, compare = shallowEqual) {
  return {
    $$typeof: REACT_MEMO,
    compare, // 比较新旧属性的差异
    type,
  };
}

function useContext(context) {
  return context._currentValue;
}

> > > function useRef() {
> > >   return { current: null };
> > > }
 
> > > function useImperativeHandle(ref, factory) {
> > >   ref.current = factory();
> > > }

const React = {
  createElement,
  Component,
  createRef,
  forwardRef,
  createContext,
  cloneElement,
  PureComponent,
  memo,
  useState,
  useMemo,
  useCallback,
  useReducer,
  useContext,
  useEffect,
> > >   useRef,
> > >   useLayoutEffect,
> > >   useImperativeHandle,
};
export default React;

3. src/react-dom.js

import {
  REACT_TEXT,
  REACT_FORWARD_REF,
  MOVE,
  PLACEMENT,
  REACT_PROVIDER,
  REACT_CONTEXT,
  REACT_MEMO,
} from "./constants";
import { addEvent } from "./event";

// 全局变量，用来记录hook的值
let hookStates = [];
// 当前hook的索引值
let hookIndex = 0;
// 函数组件更新
let scheduleUpdate;

/**
 *把虚拟DOM变成真实DOM插入容器
 * @param {*} vdom 虚拟DOM/React元素
 * @param {*} parentDOM 真实DOM容器
 */
function render(vdom, parentDOM) {
  mount(vdom, parentDOM);
  scheduleUpdate = () => {
    // 索引重置为0
    hookIndex = 0;
    compareToVdom(parentDOM, vdom, vdom);
  };
}

/**
 *
 * @param {*} reducer 处理器
 * @param {*} initialState 初始值
 */
export function useReducer(reducer, initialState) {
  hookStates[hookIndex] = hookStates[hookIndex] || initialState;
  let currentIndex = hookIndex;
  function dispatch(action) {
    const a = reducer ? reducer(hookStates[currentIndex], action) : action;
    hookStates[currentIndex] = a;
    scheduleUpdate();
  }
  return [hookStates[hookIndex++], dispatch];
}

/**
 * useState其实是useReducer的语法糖
 * @param {*} initialState 初始值
 */
export function useState(initialState) {
  hookStates[hookIndex] = hookStates[hookIndex] || initialState;
  let currentIndex = hookIndex;
  // 不管什么时候调用setState
  function setState(newState) {
    // newState如果是函数，就再执行一次
    if (typeof newState === "function")
      newState = newState(hookStates[currentIndex]);
    // currentInde永远指向hookIndex赋值时的值
    hookStates[currentIndex] = newState;
    // 状态变化后，执行调度更新
    scheduleUpdate();
  }
  return [hookStates[hookIndex++], setState];
}

/**
 *
 * @param {*} effect
 * @param {*} deps
 */
export function useEffect(callback, dependencies) {
  let currentIndex = hookIndex;
  if (hookStates[hookIndex]) {
    let [destroy, lastDeps] = hookStates[hookIndex];
    let same =
      dependencies &&
      dependencies.every((item, index) => item === lastDeps[index]);
    if (same) {
      hookIndex++;
    } else {
      destroy && destroy();
      setTimeout(() => {
        hookStates[currentIndex] = [callback(), dependencies];
      });
      hookIndex++;
    }
  } else {
    setTimeout(() => {
      hookStates[currentIndex] = [callback(), dependencies];
    });
    hookIndex++;
  }
}

> > > /**
> > >  *
> > >  * @param {*} effect
> > >  * @param {*} deps
> > >  */
> > > export function useLayoutEffect(callback, dependencies) {
> > >   let currentIndex = hookIndex;
> > >   if (hookStates[hookIndex]) {
> > >     let [destroy, lastDeps] = hookStates[hookIndex];
> > >     let same =
> > >       dependencies &&
> > >       dependencies.every((item, index) => item === lastDeps[index]);
> > >     if (same) {
> > >       hookIndex++;
> > >     } else {
> > >       destroy && destroy();
> > >       queueMicrotask(() => {
> > >         hookStates[currentIndex] = [callback(), dependencies];
> > >       });
> > >       hookIndex++;
> > >     }
> > >   } else {
> > >     queueMicrotask(() => {
> > >       hookStates[currentIndex] = [callback(), dependencies];
> > >     });
> > >     hookIndex++;
> > >   }
> > > }

/**
 * useCallback 缓存回调函数
 * @param {*} callback 创建对象的工厂函数
 * @param {*} deps 依赖数组
 */
export function useCallback(callback, deps) {
  // 判断是不是初次渲染
  if (hookStates[hookIndex]) {
    // 上一次的memo和依赖数组
    let [lastCallback, lastDeps] = hookStates[hookIndex];
    // 判断新老依赖数组是否变化
    let same = deps.every((item, index) => item === lastDeps[index]);
    if (same) {
      hookIndex++;
      return lastCallback;
    } else {
      hookStates[hookIndex++] = [callback, deps];
      return callback;
    }
  } else {
    // 初次渲染
    hookStates[hookIndex++] = [callback, deps];
    return callback;
  }
}

/**
 * useMemo 缓存对象
 * @param {*} factrouy 创建对象的工厂函数
 * @param {*} deps 依赖数组
 */
export function useMemo(factroy, deps) {
  // 判断是不是初次渲染
  if (hookStates[hookIndex]) {
    // 上一次的memo和依赖数组
    let [lastMemo, lastDeps] = hookStates[hookIndex];
    // 判断新老依赖数组是否变化
    let same = deps.every((item, index) => item === lastDeps[index]);
    if (same) {
      hookIndex++;
      return lastMemo;
    } else {
      let newMemo = factroy();
      hookStates[hookIndex++] = [newMemo, deps];
      return newMemo;
    }
  } else {
    // 初次渲染
    let newMemo = factroy();
    hookStates[hookIndex++] = [newMemo, deps];
    return newMemo;
  }
}

/** 页面挂载真实DOM */
function mount(vdom, parentDOM) {
  //把虚拟DOM变成真实DOM
  let newDOM = createDOM(vdom);
  //把真实DOM追加到容器上
  parentDOM.appendChild(newDOM);
  if (newDOM.componentDidMount) newDOM.componentDidMount();
}

/**
 * 把虚拟DOM变成真实DOM
 * @param {*} vdom 虚拟DOM
 * @return 真实DOM
 */
function createDOM(vdom) {
  if (!vdom) return null; // null/und也是合法的dom

  let { type, props, ref } = vdom;
  let dom; //真实DOM
  if (type && type.$$typeof === REACT_MEMO) {
    return mountMemoComponent(vdom);
  } else if (type && type.$$typeof === REACT_PROVIDER) {
    return mountProviderComponent(vdom);
  } else if (type && type.$$typeof === REACT_CONTEXT) {
    return mountContextComponent(vdom);
  } else if (type && type.$$typeof === REACT_FORWARD_REF) {
    return mountForwardComponent(vdom);
  } else if (type === REACT_TEXT) {
    // 如果元素为文本，创建文本节点
    dom = document.createTextNode(props.content);
  } else if (typeof type === "function") {
    if (type.isReactComponent) {
      // 说明这是一个类组件
      return mountClassComponent(vdom);
    } else {
      // 函数组件
      return mountFunctionComponent(vdom);
    }
  } else if (typeof type === "string") {
    //创建DOM节点 span div p
    dom = document.createElement(type);
  }

  // 处理属性
  if (props) {
    //更新DOM的属性 后面我们会实现组件和页面的更新。
    updateProps(dom, {}, props);
    let children = props.children;
    //如果说children是一个React元素，也就是说也是个虚拟DOM
    if (typeof children === "object" && children.type) {
      //把这个儿子这个虚拟DOM挂载到父节点DOM上
      mount(children, dom);
      props.children.mountIndex = 0;
    } else if (Array.isArray(children)) {
      reconcileChildren(children, dom);
    }
  }
  vdom.dom = dom; // 给虚拟dom添加dom属性指向这个虚拟DOM对应的真实DOM
  if (ref) ref.current = dom;
  return dom;
}

/** 挂载memo组件 */
function mountMemoComponent(vdom) {
  let { type, props } = vdom; // type是memo组件的返回值，type属性是原始的函数组件
  let renderVdom = type.type(props);
  vdom.prevProps = props; // 记录老的属性对象，以后更新时方便对比
  vdom.oldRenderVdom = renderVdom;
  return createDOM(renderVdom);
}

/** 挂载Provider组件 */
function mountProviderComponent(vdom) {
  let { type, props } = vdom; // type = { $$typeof: REACT_PROVIDER, _context: context }
  let context = type._context; // { $$typeof: REACT_CONTEXT, _currentValue: undefined }
  // 1. 赋值为Provider使用时的value值
  context._currentValue = props.value;
  // 2. 渲染的是Provider包裹的子组件
  let renderVdom = props.children;
  // 为后面更新做准备
  vdom.oldRenderVdom = renderVdom;
  return createDOM(renderVdom);
}

/** 挂载Context组件-Consumer */
function mountContextComponent(vdom) {
  let { type, props } = vdom;
  let context = type._context; // type = { $$typeof: REACT_CONTEXT, _context: context }
  let renderVdom = props.children(context._currentValue);
  vdom.oldRenderVdom = renderVdom;
  return createDOM(renderVdom);
}

/** 挂载类组件 */
function mountClassComponent(vdom) {
  let { type: ClassComponent, props, ref } = vdom;
  // 把类组件的属性传递给类组件的构造函数，
  // 创建类组件的实例，返回组件实例对象，以便在组件卸载时可以直接执行实例的方法
  let classInstance = new ClassComponent(props);
  if (classInstance.contextType) {
    // 把value值赋给实例的context属性
    classInstance.context = ClassComponent.contextType._currentValue;
  }

  // 在虚拟DOM上挂载classInstance，指向类的实例
  vdom.classInstance = classInstance;
  // 如果有ref，就把实例赋值给current属性
  if (ref) ref.current = classInstance;
  if (classInstance.componentWillMount) {
    classInstance.componentWillMount();
  }
  //可能是原生组件的虚拟DOM，也可能是类组件的的虚拟DOM，也可能是函数组件的虚拟DOM
  let renderVdom = classInstance.render();
  //在第一次挂载类组件的时候让类实例上添加一个oldRenderVdom=renderVdom
  // 类组件的虚拟dom的oldRenderVdom属性，指向renderVdom
  vdom.oldRenderVdom = classInstance.oldRenderVdom = renderVdom;
  let dom = createDOM(renderVdom);
  if (classInstance.componentDidMount) {
    dom.componentDidMount = classInstance.componentDidMount.bind(classInstance);
  }
  return dom;
}

/** 挂载函数组件 */
function mountFunctionComponent(vdom) {
  let { type: functionComponent, props } = vdom;
  //获取组件将要渲染的虚拟DOM
  let renderVdom = functionComponent(props);
  // 函数组件的oldRenderVdom属性，指向渲染的虚拟DOM--renderVdom
  vdom.oldRenderVdom = renderVdom;
  return createDOM(renderVdom);
}

/** 挂载经过转发的ref的函数组件 */
function mountForwardComponent(vdom) {
  let { type, props, ref } = vdom;
  let renderVdom = type.render(props, ref);
  return createDOM(renderVdom);
}

/** 如果子元素为数组，遍历挂载到容器 */
function reconcileChildren(children, parentDOM) {
  // 给每个虚拟DOM挂载mountIndex属性记录其索引
  children.forEach((childVdom, index) => {
    childVdom.mountIndex = index;
    mount(childVdom, parentDOM);
  });
}

/**
 * 把新的属性更新到真实DOM上
 * @param {*} dom 真实DOM
 * @param {*} oldProps 旧的属性对象
 * @param {*} newProps 新的属性对象
 */
function updateProps(dom, oldProps, newProps) {
  for (let key in newProps) {
    if (key === "children") {
      // 子节点另外处理
      continue;
    } else if (key === "style") {
      let styleObj = newProps[key];
      for (let attr in styleObj) {
        dom.style[attr] = styleObj[attr];
      }
    } else if (/^on[A-Z].*/.test(key)) {
      // 绑定事件 ==> dom.onclick = 事件函数
      // dom[key.toLowerCase()] = newProps[key];
      // 之后不再把事件函数绑定在对应的DOM上，而是事件委托到文档对象
      addEvent(dom, key.toLowerCase(), newProps[key]);
    } else {
      dom[key] = newProps[key];
    }
  }

  for (let key in oldProps) {
    //如果说一个属性老的属性对象里有，新的属性没有，就需要删除
    if (!newProps.hasOwnProperty(key)) {
      dom[key] = null;
    }
  }
}

/**
 * DOM-DIFF：递归比较老的虚拟DOM和新的虚拟DOM，找出两者的差异，把这些差异最小化的同步到真实DOM上
 * @param {*} parentDOM 父真实DOM
 * @param {*} oldVdom 老的虚拟DOM
 * @param {*} newVdom 新的虚拟DOM
 * @param {*} nextDOM 新的虚拟DOM
 *
 */
export function compareToVdom(parentDOM, oldVdom, newVdom, nextDOM) {
  /**
    // 之前写得：
    // 拿到老的真实DOM，创建新的真实DOM，新的替换掉老的
    // 性能很差，应完善，去做深度的dom-diff 
    // 获取oldRenderVdom对应的真实DOM
    let oldDOM = findDOM(oldVdom);
    // 根据新的虚拟DOM得到新的真实DOM
    let newDOM = createDOM(newVdom);
    // 把老的真实DOM替换为新的真实DOM
    parentDOM.replaceChild(newDOM, oldDOM);
  */

  // 1.老-无 新-无：啥也不干
  if (!oldVdom && !newVdom) return;
  // 2.老-有 新-无：直接删除老节点
  if (oldVdom && !newVdom) {
    unMountVdom(oldVdom);
  }
  // 3.老-无 新-有：插入节点
  if (!oldVdom && newVdom) {
    mountVdom(parentDOM, newVdom, nextDOM);
  }
  // 4-1.老-有 新-有：判断类型不一样，删除老的，添加新的
  if (oldVdom && newVdom && oldVdom.type !== newVdom.type) {
    unMountVdom(oldVdom);
    mountVdom(parentDOM, newVdom, nextDOM);
  }
  // 4-2.老-有 新-有：判断类型一样，进行DOM-DIFF，并且节点可复用
  if (oldVdom && newVdom && oldVdom.type === newVdom.type) {
    updateElement(oldVdom, newVdom);
  }
}

/**
 * 新老DOM类型一样的更新----DOM-DIFF精髓之处
 * 如果新老DOM的类型一样，那么节点就可以复用
 */
function updateElement(oldVdom, newVdom) {
  // memo组件
  if (oldVdom.type.$$typeof === REACT_MEMO) {
    updateMemoComponent(oldVdom, newVdom);
    // Consumer组件
  } else if (oldVdom.type.$$typeof === REACT_PROVIDER) {
    updateProviderComponent(oldVdom, newVdom);
    // Provider组件
  } else if (oldVdom.type.$$typeof === REACT_CONTEXT) {
    updateContextComponent(oldVdom, newVdom);
    // 新老节点都是文本节点：复用老的节点，替换内容
  } else if (oldVdom.type === REACT_TEXT) {
    // 老的真实DOM给新的DOM的dom属性，把内容改掉
    let currentDOM = (newVdom.dom = findDOM(oldVdom));
    if (newVdom.props) currentDOM.textContent = newVdom.props.content;
    // 原生节点
  } else if (typeof oldVdom.type === "string") {
    let currentDOM = (newVdom.dom = findDOM(oldVdom));
    // 更新属性
    updateProps(currentDOM, oldVdom.props, newVdom.props);
    // 递归比较儿子
    updateChildren(currentDOM, oldVdom.props.children, newVdom.props.children);
    // 类组件或函数组件
  } else if (typeof oldVdom.type === "function") {
    // 类组件
    if (oldVdom.type.isReactComponent) {
      // 先同步实例
      newVdom.classInstance = oldVdom.classInstance;
      updateClassComponent(oldVdom, newVdom);
      // 函数组件
    } else {
      updateFunctionComponent(oldVdom, newVdom);
    }
  }
}

/** 更新memo组件 */
function updateMemoComponent(oldVdom, newVdom) {
  let { type, prevProps } = oldVdom; // 类型 老属性
  // 新老属性不相等，更新
  if (!type.compare(prevProps, newVdom.props)) {
    // 获取老的真实DOM
    let oldDOM = findDOM(oldVdom);
    // 获取真实父节点
    let parentDOM = oldDOM.parentNode;
    let { type, props } = newVdom;
    let renderVdom = type.type(props);
    compareToVdom(parentDOM, oldVdom.oldRenderVdom, renderVdom);
    newVdom.prevProps = props;
    newVdom.oldRenderVdom = renderVdom;
    // 新老属性相等，跳过更新，直接赋值
  } else {
    newVdom.prevProps = prevProps;
    newVdom.oldRenderVdom = oldVdom.oldRenderVdom;
  }
}

/** 更新Proveder组件 */
function updateProviderComponent(oldVdom, newVdom) {
  // 获取老的真实DOM
  let oldDOM = findDOM(oldVdom);
  // 获取真实父节点
  let parentDOM = oldDOM.parentNode;
  let { type, props } = newVdom;
  let context = type._context;
  // 新的属性赋值给_currentValue
  context._currentValue = props.value;
  let renderVdom = props.children;
  compareToVdom(parentDOM, oldVdom.oldRenderVdom, renderVdom);
  newVdom.oldRenderVdom = renderVdom;
}

/** 更新context组件 */
function updateContextComponent(oldVdom, newVdom) {
  // 获取老的真实DOM
  let oldDOM = findDOM(oldVdom);
  // 获取真实父节点
  let parentDOM = oldDOM.parentNode;
  let { type, props } = newVdom;
  let context = type._context;
  // 从 取值
  let renderVdom = props.children(context._currentValue);
  compareToVdom(parentDOM, oldVdom.oldRenderVdom, renderVdom);
  newVdom.oldRenderVdom = renderVdom;
}

/**
 * 更新类组件
 * @param {*} oldVdom
 * @param {*} newVdom
 */
function updateClassComponent(oldVdom, newVdom) {
  // 复用老的类组件实例
  let classInstance = (newVdom.classInstance = oldVdom.classInstance);
  if (classInstance.componentWillReceiveProps) {
    classInstance.componentWillReceiveProps(newVdom.props);
  }
  classInstance.updater.emitUpdate(newVdom.props);
}

/**
 * 更新函数组件
 * @param {*} oldVdom
 * @param {*} newVdom
 */
function updateFunctionComponent(oldVdom, newVdom) {
  // 获取老的真实DOM的父节点
  let parentDOM = findDOM(oldVdom).parentNode;
  let { type, props } = newVdom;
  let newRenderVdom = type(props);
  // 函数组件更新每次都要重新执行函数，拿到新的虚拟DOM
  compareToVdom(parentDOM, oldVdom.oldRenderVdom, newRenderVdom);
  newVdom.newRenderVdom = newRenderVdom;
}

/**
 * 递归比较子节点
 * @param {*} parentDOM
 * @param {*} oldVChildren
 * @param {*} newVChildren
 */
function updateChildren(parentDOM, oldVChildren, newVChildren) {
  // 为方便后续进行DOM-DIFF，以数组形式保存
  oldVChildren = (
    Array.isArray(oldVChildren) ? oldVChildren : [oldVChildren]
  ).filter((item) => item);
  newVChildren = (
    Array.isArray(newVChildren) ? newVChildren : [newVChildren]
  ).filter((item) => item);
  // DOM-DIFF 1.构建老map {虚拟DOM的key: 虚拟DOM}
  let keyedOldMap = {};
  oldVChildren.forEach((oldVChild, index) => {
    let oldKey = oldVChild.key ? oldVChild.key : index;
    keyedOldMap[oldKey] = oldVChild;
  });
  // 补丁包：存放要进行的操作
  let patch = [];
  // 上一个放置好的、不需要移动的索引
  let lastPlaceIndex = 0;
  // DOM-DIFF 2.遍历新数组查找老虚拟DOM
  newVChildren.forEach((newVChild, index) => {
    newVChild.mountIndex = index;
    let newKey = newVChild.key ? newVChild.key : index;
    // 查找老的虚拟DOM中是否存在这个key的节点
    let oldVChild = keyedOldMap[newKey];
    // 如果找到，复用老节点
    if (oldVChild) {
      // 先更新
      updateElement(oldVChild, newVChild);
      // 判断是否移动 把oldVChild移动到mountIndex当前索引处
      if (oldVChild.mountIndex < lastPlaceIndex) {
        patch.push({
          type: MOVE,
          oldVChild,
          newVChild,
          mountIndex: index,
        });
      }
      // 删除已经被复用的节点
      delete keyedOldMap[newKey];
      lastPlaceIndex = Math.max(oldVChild.mountIndex, lastPlaceIndex);
    } else {
      // 如果没找到，插入新节点
      patch.push({
        type: PLACEMENT,
        newVChild,
        mountIndex: index,
      });
    }
  });
  // DOM-DIFF 3.获取需要移动的元素
  let moveChildren = patch
    .filter((action) => action.type === MOVE)
    .map((action) => action.oldVChild);
  // 遍历map留下的元素（其实就是没有被复用的）
  Object.values(keyedOldMap)
    .concat(moveChildren)
    .forEach((oldVChild) => {
      // 获取老DOM
      let currentDOM = findDOM(oldVChild);
      parentDOM.removeChild(currentDOM);
    });
  // DOM-DIFF 4.插入或移动节点
  patch.forEach((action) => {
    let { type, oldVChild, newVChild, mountIndex } = action;
    // 真实DOM节点集合
    let childNodes = parentDOM.childNodes;
    if (type === PLACEMENT) {
      // 根据新的虚拟DOM创建新真实DOM
      let newDOM = createDOM(newVChild);
      // 获取老DOM中对应的索引处的真实DOM
      let childNode = childNodes[mountIndex];
      if (childNode) {
        parentDOM.insertBefore(newDOM, childNode);
      } else {
        parentDOM.appendChild(newDOM);
      }
    } else if (type === MOVE) {
      let oldDOM = findDOM(oldVChild);
      let childNode = childNodes[mountIndex];
      if (childNode) {
        parentDOM.insertBefore(oldDOM, childNode);
      } else {
        parentDOM.appendChild(oldDOM);
      }
    }
  });

  // // 最大长度
  // let maxLength = Math.max(oldVChildren.length, newVChildren.length);
  // // 每一个都进行深度对比
  // for (let i = 0; i < maxLength; i++) {
  //   // 在老的虚拟DOM查找，有老节点并且老节点真的对应一个真实DOM节点，并且这个索引要比我大（目的是找到本身的下一个节点）
  //   let nextVdom = oldVChildren.find(
  //     (item, index) => index > i && item && findDOM(item)
  //   );
  //   compareToVdom(
  //     parentDOM,
  //     oldVChildren[i],
  //     newVChildren[i],
  //     nextVdom && findDOM(nextVdom)
  //   );
  // }
}

/**
 * 插入新的真实DOM
 * @param {}} parentDOM
 * @param {*} vdom
 * @param {*} nextDOM
 */
function mountVdom(parentDOM, newVdom, nextDOM) {
  let newDOM = createDOM(newVdom);
  if (nextDOM) {
    parentDOM.insertBefore(newDOM, nextDOM);
  } else {
    parentDOM.appendChild(newDOM);
  }
  if (newDOM.componentDidMount) {
    newDOM.componentDidMount();
  }
}

/**
 * 删除老的真实DOM
 * @param {*} vdom 老的虚拟DOM
 */
function unMountVdom(vdom) {
  let { props, ref } = vdom;
  // 获取老的真实DOM
  let currentDOM = findDOM(vdom);
  // 如果这个子节点是类组件，还要执行它的卸载的生命周期函数
  if (vdom.classInstance && vdom.classInstance.componentWillUnmount) {
    vdom.classInstance.componentWillUnmount();
  }
  // 如果有ref，删除ref对应的真实DOM
  if (ref) ref.current = null;
  // 取消监听函数
  Object.keys(props).forEach((propName) => {
    if (propName.slice(0, 2) === "on") {
      // 事件在真实dom就这样做
      //   const eventName = propName.slice(2).toLowerCase()
      //   currentDOM.removeEventListener(eventName, props[propName])
      //但是我们先处理了合成事件，事件注册再store上
      delete currentDOM.store;
    }
  });
  // 如果有子节点，递归删除所有子节点
  if (props.children) {
    let children = Array.isArray(props.children)
      ? props.children
      : [props.children];
    children.forEach(unMountVdom);
  }
  // 从父节点中把自己删除
  if (currentDOM) currentDOM.parentNode.removeChild(currentDOM);
}

/** 虚拟DOM返回的真实DOM */
export function findDOM(vdom) {
  if (!vdom) return null;
  // 如果有dom属性，说明这个vdom是原生组件的虚拟DOM，会有dom属性指向真实dom
  if (vdom.dom) {
    return vdom.dom;
  } else {
    return findDOM(vdom.oldRenderVdom);
  }
}

const ReactDOM = {
  render,
};
export default ReactDOM;