// 查看cookie
document.cookie;
// 新增cookie
document.cookie = "name = Tom";

// 设置localStorage
localStorage.setItem("name", "Tom");
// 查看localStorage
localStorage.getItem("name"); // Tom
// 设置相同键名，会覆盖之前的值
localStorage.setItem("name", "Jack"); // name被覆盖为Jack
// 删除指定localStorage
localStorage.removeItem("name");
// 删除所有localStorage
localStorage.clear();

// 当前页面是test2.jsxx.com；需要请求test.jsxx.com/xx.php，存在跨域
// 利用test2.jsxx.com可以请求该资源，创建一个相同基础域名的iframe，
// 利用iframe去请求资源
document.domain = "jsxx.com";

var iframe = document.createElement("ifarme");
iframe.src = "http://test.jsxx.com/index.html"; // 这个域名的文件设置相同的基础域名
iframe.id = "myIframe";
iframe.style.display = "none";
iframe.onload = function () {
  var contentWindow = document.getElementById("myIframe").contentWindow;
  // 发起请求
};
document.body.appendChild(iframe);

var flag = false；

var iframe = document.createElement('iframe');
var getDatas = function(){
  if(flag){
    // 跳转后的加载走这里，contentWindow存的是同一个name，可以获取了
    var data = iframe.contentWindow.name;
    console.log(JSON.parse(data));
  }else{
    // 第一次加载，走这里，跳转到同源地址
    flag = true;
    setTImeout(()=>{
    	ifrmae.contentWindow.location = 'index2.html'
    },500)
  }
}

// 跨域获取的资源链接
iframe.src = 'http://test.jsxx.com/index.html';
// 每次加载时，获取数据
iframe.onload = getDatas();

document.body.appendChild(iframe)

// index.html
// 获取的数据保存到window上
window.name = 'xxx'

//* 原理

// 当前页面
<script type="text/javascript">
  // 定义回调函数
  function getData(data){
    console.log(data)
  }
</script>
// 新建一个用于跨域的标签,页面加载的时候会执行
<script src="http://test.jsxx.com/jsonp/jsonp.js"></script>

// 跨域标签所指向的文件 jsonp.js
$.ajax('xxx'){
  success(data){
    // 执行回调
    getData(data)
  }
}

//* 实际操作
<script type="text/javascript">
  var oBtn = document.getElementById('btn');

	oBtn.onClick = function(){
    oScript = document.createElement("script")
    oScript.src = "http://test.jsxx.com/jsonp/jsonp.php?cb=test"
    document.body.appendChild(oScript)
    document.body.removeChild(oScript)


    // 使用jQuery封装的方法
    $.ajax({
      url: "http://test.jsxx.com/jsonp/jsonp.php",
      type: "GET",
      dataType: "JSONP",
      jsonp: "cb",
      success: function(data){
        console.log(data)
      }
    })
  }
</script>

cookie auth= ident_code:token
// 后端设置cookie
setCookie('auth',ident_code:token, 过期时间, '/'【有效地址】， '.baidu.com'【有效域】)

function get(key, cb) {
  var cookieArray = document.cookie.split(";");

  for (var i = 0; i < cookieArray.length; i++) {
    var cookieItem = cookieArray[i];

    var cookieItemArray = cookieItem.split("=");

    if (cookieItemArray[0] == key) {
      cb(cookieItemArray[1]);
      return this;
    }
  }
  cb(undefined);
  s;
  return this;
}

history.replaceState("text name", null, "text.html");

window.addEventListener("popState", () => {});

if (window.Worker) {
  // 实例化
  var worker = new Worker("worker.js");
  // 信息
  var message = { addThis: { num: 1, num2: 1 } };
  // 传递信息
  myWorker.postMessage(message);
  // 接收信息
  myWorker.onmessage = function (e) {
    console.log(e);
  };
}

// wokker.js
this.onmessage = function (e) {
  if (e.data.addThs) {
    var message = {
      result: e.data.addThis.num1 + e.data.addThis.num2,
    };
    this.postMessage(message);
  }
};

// 例如将 input 转成output的形式
let input = [
  {
    id: 1,
    val: "学校",
    parentId: null,
  },
  {
    id: 2,
    val: "班级1",
    parentId: 1,
  },
  {
    id: 3,
    val: "班级2",
    parentId: 1,
  },
  {
    id: 4,
    val: "学生1",
    parentId: 2,
  },
  {
    id: 5,
    val: "学生2",
    parentId: 2,
  },
  {
    id: 6,
    val: "学生3",
    parentId: 3,
  },
];

let output = {
  id: 1,
  val: "学校",
  children: [
    {
      id: 2,
      val: "班级1",
      children: [
        {
          id: 4,
          val: "学生1",
          children: [],
        },
        {
          id: 5,
          val: "学生2",
          children: [],
        },
      ],
    },
    {
      id: 3,
      val: "班级2",
      children: [
        {
          id: 6,
          val: "学生3",
          children: [],
        },
      ],
    },
  ],
};

function arrToTree(arr) {
  return arr.filter((item) => {
    item.children = arr.filter((i) => {
      return item.id === i.parentId;
    });
    return !item.parentId;
  });
}

function arrToTree(arr, parentId) {
  let parentArr = arr.filter((item) =>
    parentId === undefined ? item.parentId === null : item.parentId === parentId
  );
  return parentArr.map((i) => {
    i.children = arrToTree(arr, i.id);
    return i;
  });
}

function getChildren(arr, result, parentId) {
  for (let item of arr) {
    if (item.parentId === parentId) {
      const newItem = { ...item, children: [] };
      result.push(newItem);
      getChildren(arr, newItem.children, item.id);
    }
  }
}
function arrToTree(arr, parentId) {
  const result = [];
  getChildren(arr, result, parentId);
  return result;
}

function arrToTree(arr) {
  let map = new Map();
  for (let item of arr) {
    item.children = [];
    map.set(item.id, item);
    map.has(item.parentId) && map.get(item.parentId).children.push(item);
  }
  return map.get(1);
}

// 写法一
function arrayToTree(array) {
  let root = array[0];
  array.shift();
  let tree = {
    id: root.id,
    val: root.val,
    children: array.length > 0 ? toTree(root.id, array) : [],
  };
  return tree;
}

function toTree(parenId, array) {
  let children = [];
  let len = array.length;
  for (let i = 0; i < len; i++) {
    let node = array[i];
    if (node.parentId === parenId) {
      children.push({
        id: node.id,
        val: node.val,
        children: toTree(node.id, array),
      });
    }
  }
  return children;
}

console.log(arrayToTree(input));

// 写法二
function getTreeList(rootList, id, list) {
  for (let item of rootList) {
    if (item.parentid === id) {
      list.push(item);
    }
  }

  for (let i of list) {
    i.children = [];
    getTreeList(rootList, i.id, i.children);
    // 去除children为[]的情况
    if (i.children.length === 0) {
      delete i.children;
    }
  }
  return list;
}
const res = getTreeList(input, null, []);

// 定义状态
const PENDING = "PENDING";
const FULFILLED = "FULFILLED";
const REJECTED = "REJECTED";

class MyPromise {
  constructor(executor) {
    // 捕获执行器的错误
    try {
      // 立即执行执行器
      executor(this.resolve, this.reject);
    } catch (error) {
      this.reject(error);
    }
    // promise状态
    this.status = PENDING; // 默认值
    // 成功后的值
    this.value = undefined;
    // 失败后的原因
    this.reason = undefined;
    // 成功回调
    this.successCallback = [];
    // 失败回调
    this.failCallback = [];
  }

  // 添加resolve
  resolve = (value) => {
    // 由状态修改后无法再次修改
    // 如果状态不是等待 就阻止程序向下执行
    if (this.status !== PENDING) return;

    // 将状态更改为成功
    this.status = FULFILLED;
    // 保存成功后的值
    this.value = value;
    // 成功回调是否存在,存在就调用
    // this.successCallback && this.successCallback(this.value)
    this.successCallback.forEach((fn) => fn());
  };
  // 添加reject
  reject = (reason) => {
    // 如果状态不是等待 就阻止程序向下执行
    if (this.status !== PENDING) return;
    // 将状态更改为失败
    this.status = REJECTED;
    // 保存失败后的原因
    this.reason = reason;
    // 失败回调是否存在,存在就调用
    // this.failCallback && this.failCallback(this.reason)
    this.failCallback.forEach((fn) => fn());
  };

  // then方法内部就是判断状态,成功状态调用成功函数,失败状态调用失败函数
  // then成功回调的参数是成功后的值,失败回调的参数是返回的原因

  then = (successCallback, failCallback) => {
    // then链式传递
    successCallback =
      typeof successCallback === "function"
        ? successCallback
        : (value) => value;
    failCallback =
      typeof failCallback === "function"
        ? failCallback
        : (reason) => {
            throw reason;
          };
    // then方法每次都要返回一个promise
    let promise2 = new MyPromise((resolve, reject) => {
      // 判断状态
      if (this.status === FULFILLED) {
        // 将代码用setTimeout包裹变成异步代码,为了能拿到promise2
        setTimeout(() => {
          // 捕获错误
          try {
            let x = successCallback(this.value);
            // 判断x的值是普通值还是promise对象
            // 如果是普通值,直接调用resolve
            // 如果是promise, 查看promise对象返回的结果,根据结果,绝对调用resolve还是reject
            // 把返回值传递给下一个回调
            resolvePromise(promise2, x, resolve, reject);
          } catch (error) {
            reject(error);
          }
        }, 0);
      } else if (this.status === REJECTED) {
        // 将代码用setTimeout包裹变成异步代码,为了能拿到promise2
        setTimeout(() => {
          // 捕获错误
          try {
            let x = failCallback(this.value);
            // 判断x的值是普通值还是promise对象
            // 如果是普通值,直接调用resolve
            // 如果是promise, 查看promise对象返回的结果,根据结果,绝对调用resolve还是reject
            // 把返回值传递给下一个回调
            resolvePromise(promise2, x, resolve, reject);
          } catch (error) {
            reject(error);
          }
        }, 0);
      } else {
        // 状态是pending,是存在异步情况
        // 将成功回调和失败回调存储起来
        this.successCallback.push(() => {
          setTimeout(() => {
            // 捕获错误
            try {
              let x = successCallback(this.value);
              // 判断x的值是普通值还是promise对象
              // 如果是普通值,直接调用resolve
              // 如果是promise, 查看promise对象返回的结果,根据结果,绝对调用resolve还是reject
              // 把返回值传递给下一个回调
              resolvePromise(promise2, x, resolve, reject);
            } catch (error) {
              reject(error);
            }
          }, 0);
        });
        this.failCallback.push(() => {
          setTimeout(() => {
            // 捕获错误
            try {
              let x = failCallback(this.value);
              // 判断x的值是普通值还是promise对象
              // 如果是普通值,直接调用resolve
              // 如果是promise, 查看promise对象返回的结果,根据结果,绝对调用resolve还是reject
              // 把返回值传递给下一个回调
              resolvePromise(promise2, x, resolve, reject);
            } catch (error) {
              reject(error);
            }
          }, 0);
        });
      }
    });

    return promise2;
  };
  // 捕获错误
  catch(failCallback) {
    return this.then(undefined, failCallback);
  }

  // 返回 then的链式调用
  finally = (callback) => {
    // 使用then保证链式调用
    return this.then(
      (value) => {
        // 使用resolve保证返回promise对象
        return MyPromise.resolve(callback()).then(() => value);
      },
      (reason) => {
        return MyPromise.resolve(callback()).then(() => {
          throw reason;
        });
      }
    );
  };

  static all(array) {
    // 设置返回的数组
    let result = [];
    // 设置计数器
    let index = 0;
    return new MyPromise((resolve, reject) => {
      for (let i = 0; i < array.length; i++) {
        let current = array[i];
        if (current instanceof MyPromise) {
          // 是promise对象
          current.then(
            (value) => addData(i, value),
            (reason) => reject(reason)
          );
        } else {
          // 普通值
          addData(i, array[i]);
        }
      }

      function addData(key, value) {
        // 保证位置是按顺序的
        result[key] = value;
        // 跑一个算一个
        index++;
        // 计数器和数组长度相等说明都跑完了
        if (index === array.length) {
          resolve(result);
        }
      }
    });
  }
  static resolve(value) {
    if (value instanceof MyPromise) return value;
    return new MyPromise((resolve) => resolve(value));
  }
}

const resolvePromise = (promise2, x, resolve, reject) => {
  if (promise2 === x) {
    // 如果自我调用就报错,并阻止继续执行
    return reject(
      new TypeError("Chaining cycle detected for promise #<Promise>")
    );
  }
  if (x instanceof MyPromise) {
    // x 是否是MyPromise的实例对象,是就是promise对象
    x.then(resolve, reject);
  } else {
    // 普通值
    resolve(x);
  }
};

let arr = [];
Array.form(new Set(arr));

let state = [];
let setters = [];
let stateIndex = 0;

function createSetter(index) {
  return function (newState) {
    state[index] = newState;
    render();
  };
}

function useState(initState) {
  state[stateIndex] = state[stateIndex] ? state[stateIndex] : initState;
  setters.push(createSetter(stateIndex));
  stateIndex++;
  // 状态
  let value = state[stateIndex];
  // 方法
  let setter = setters[stateIndex];

  return [value, setter];
}

// 上一次的依赖值
let prevDepsAry = [];
// 这个声明用于多个effect的情况
let effectIndex = 0;

function useEffect(callback, depsAry) {
  // 判断callback是否为函数
  if (Object.prototype.toString.call(callback) !== "[object Function]")
    throw new Error("useEffect接收一个函数");
  // 判断depsAry是否传递
  if (typeof depsAry === "undefined") {
    // 没有传递
    callback();
  } else {
    // 判断depsAry是不是数组
    if (Object.prototype.toString.call(depsAry) !== "[object Array]")
      throw new Error("useEffect依赖必须是数组");
    // 获取上一次的值,如果有就取,没有不取
    let prevDeps = prevDepsAry[effectIndex];
    // 判断当前依赖值与上一次依赖,是否有变化,有才调用callback
    let hasChanged = prevDeps
      ? depsAry.every((dep, index) => dep === prevDeps[index]) === false
      : true;
    // 判断值是否有变化
    if (hasChanged) {
      callback();
    }
    // 比完之后要同步依赖值,保证依赖值最新
    prevDepsAry[effectIndex] = depsAry;
    // 多个useEffect时标记增加,记得在render时归零
    effectIndex++;
  }
}

function useReducer(reducer, initState) {
  const [state, setState] = useState(initState);
  // useReducer内部返回dispatch方法
  function dispatch(action) {
    // dispatch内部调用reducer返回最新的state
    const newState = reducer(state, action);
    setState(newState);
  }
  return [state, dispatch];
}

function App() {
  const [count, dispatch] = useReducer(render, 0);

  function reducer(state, action) {
    switch (action.type) {
      case "increment":
        return state + 1;
        break;
      case "decrement":
        return state - 1;
      default:
        return state;
    }
  }

  return (
    <div>
      {count}
      <button onClick={() => dispatch({ type: "increment" })}>add</button>
      <button onClick={() => dispatch({ type: "decrement" })}>delete</button>
    </div>
  );
}

function render() {
  stateIndex = 0;
  effectIndex = 0;

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

const Observer = function (data) {
  // 循环修改为每个属性添加get set
  for (let key in data) {
    defineReactive(data, key);
  }
};

const defineReactive = function (obj, key) {
  // 局部变量dep，用于get set内部调用
  const dep = new Dep();
  // 获取当前值
  let val = obj[key];
  Object.defineProperty(obj, key, {
    // 设置当前描述属性为可被循环
    enumerable: true,
    // 设置当前描述属性可被修改
    configurable: true,
    get() {
      console.log("in get");
      // 调用依赖收集器中的addSub，用于收集当前属性与Watcher中的依赖关系
      dep.depend();
      return val;
    },
    set(newVal) {
      if (newVal === val) {
        return;
      }
      val = newVal;
      // 当值发生变更时，通知依赖收集器，更新每个需要更新的Watcher，
      // 这里每个需要更新通过什么断定？dep.subs
      dep.notify();
    },
  });
};

const observe = function (data) {
  return new Observer(data);
};

const Vue = function (options) {
  const self = this;
  // 将data赋值给this._data，源码这部分用的Proxy所以我们用最简单的方式临时实现
  if (options && typeof options.data === "function") {
    this._data = options.data.apply(this);
  }
  // 挂载函数
  this.mount = function () {
    new Watcher(self, self.render);
  };
  // 渲染函数
  this.render = function () {
    with (self) {
      _data.text;
    }
  };
  // 监听this._data
  observe(this._data);
};

const Watcher = function (vm, fn) {
  const self = this;
  this.vm = vm;
  // 将当前Dep.target指向自己
  Dep.target = this;
  // 向Dep方法添加当前Wathcer
  this.addDep = function (dep) {
    dep.addSub(self);
  };
  // 更新方法，用于触发vm._render
  this.update = function () {
    console.log("in watcher update");
    fn();
  };
  // 这里会首次调用vm._render，从而触发text的get
  // 从而将当前的Wathcer与Dep关联起来
  this.value = fn();
  // 这里清空了Dep.target，为了防止notify触发时，不停的绑定Watcher与Dep，
  // 造成代码死循环
  Dep.target = null;
};

const Dep = function () {
  const self = this;
  // 收集目标
  this.target = null;
  // 存储收集器中需要通知的Watcher
  this.subs = [];
  // 当有目标时，绑定Dep与Wathcer的关系
  this.depend = function () {
    if (Dep.target) {
      self.addSub(Dep.target);
    }
  };
  // 为当前收集器添加Watcher
  this.addSub = function (watcher) {
    self.subs.push(watcher);
  };
  // 通知收集器中所的所有Wathcer，调用其update方法
  this.notify = function () {
    for (let i = 0; i < self.subs.length; i += 1) {
      self.subs[i].update();
    }
  };
};

const vue = new Vue({
  data() {
    return {
      text: "hello world",
    };
  },
});

vue.mount(); // in get
vue._data.text = "123"; // in watcher update /n in get

type Fiber = {
  // 组件类型 div、span、组件构造函数
  type: any,
  // DOM 对象
  stateNode: any,
  // 指向自己的父级 Fiber 对象
  return: Fiber | null,
  // 指向自己的第一个子级 Fiber 对象
  child: Fiber | null,
  // 指向自己的下一个兄弟 iber 对象
  sibling: Fiber | null,
};

requestIdleCallback(function (deadline) {
  //deadline.timeRemaining() 获取浏览器的空余时间
});

import React from "react";

const jsx = (
  <div id="a1">
    <div id="b1">
      <div id="c1"></div>
      <div id="c2"></div>
    </div>
    <div id="b2"></div>
  </div>
);

const container = document.getElementById("root");

/**
 * 1. 为每一个节点构建 Fiber 对象
 * 2. 构建 Fiber 链表
 * 3. 提交 Fiber 链接
 */

// 创建根元素 Fiber 对象
const workInProgressRoot = {
  stateNode: container,
  props: {
    children: [jsx],
  },
};

let nextUnitOfWork = workInProgressRoot;

function workLoop(deadline) {
  // 如果下一个要构建的执行单元存在并且浏览器有空余时间
  while (nextUnitOfWork && deadline.timeRemaining() > 0) {
    // 构建执行单元并返回新的执行单元
    nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
  }
  // 如果所有的执行单元都已经构建完成
  if (!nextUnitOfWork) {
    // 进入到第二个阶段 执行 DOM 操作
    commitRoot();
  }
}
// Fiber 工作的第一个阶段
function performUnitOfWork(workInProgress) {
  // 构建阶段向下走的过程
  // 1. 创建当前 Fiber 节点的 DOM 对象并存储在 stateNode 属性中
  // 2. 构建子级 Fiber 对象
  beginWork(workInProgress);
  // 如果子级存在
  if (workInProgress.child) {
    // 返回子级 构建子级的子级
    return workInProgress.child;
  }
  // 开始构建阶段向上走的过程
  // 如果父级存在
  while (workInProgress) {
    // 构建 Fiber 链表
    completeUnitOfWork(workInProgress);
    // 如果同级存在
    if (workInProgress.sibling) {
      // 返回同级 构建同级的子级
      return workInProgress.sibling;
    }
    // 同级不存在 退回父级 看父级是否有同级
    workInProgress = workInProgress.return;
  }
}

function beginWork(workInProgress) {
  // 如果 Fiber 对象没有存储其对应的 DOM 对象
  if (!workInProgress.stateNode) {
    // 创建 DOM 对象并存储在 Fiber 对象中
    workInProgress.stateNode = document.createElement(workInProgress.type);
    // 为 DOM 对象添加属性
    for (let attr in workInProgress.props) {
      if (attr !== "children") {
        workInProgress.stateNode[attr] = workInProgress.props[attr];
      }
    }
  }
  // 创建子级 Fiber 对象
  if (Array.isArray(workInProgress.props.children)) {
    // 记录上一次创建的子级 Fiber 对象
    let previousFiber = null;
    // 遍历子级
    workInProgress.props.children.forEach((child, index) => {
      // 创建子级 Fiber 对象
      let childFiber = {
        type: child.type,
        props: child.props,
        return: workInProgress,
        effectTag: "PLACEMENT",
      };
      // 第一个子级挂载到父级的 child 属性中
      if (index === 0) {
        workInProgress.child = childFiber;
      } else {
        // 其他子级挂载到自己的上一个兄弟的 sibling 属性中
        previousFiber.sibling = childFiber;
      }
      // 更新上一个子级
      previousFiber = childFiber;
    });
  }
}

function completeUnitOfWork(workInProgress) {
  let returnFiber = workInProgress.return;

  if (returnFiber) {
    // 链头上移
    if (!returnFiber.firstEffect) {
      returnFiber.firstEffect = workInProgress.firstEffect;
    }
    // lastEffect 上移
    if (!returnFiber.lastEffect) {
      returnFiber.lastEffect = workInProgress.lastEffect;
    }
    // 构建链表
    if (workInProgress.effectTag) {
      if (returnFiber.lastEffect) {
        returnFiber.lastEffect.nextEffect = workInProgress;
      } else {
        returnFiber.firstEffect = workInProgress;
      }
      returnFiber.lastEffect = workInProgress;
    }
  }
}

// Fiber 工作的第二阶段
function commitRoot() {
  // 获取链表中第一个要执行的 DOM 操作
  let currentFiber = workInProgressRoot.firstEffect;
  // 判断要执行 DOM 操作的 Fiber 对象是否存在
  while (currentFiber) {
    // 执行 DOM 操作
    currentFiber.return.stateNode.appendChild(currentFiber.stateNode);
    // 从链表中取出下一个要执行 DOM 操作的 Fiber 对象
    currentFiber = currentFiber.nextEffect;
  }
}

// 在浏览器空闲的时候开始构建
requestIdleCallback(workLoop);

function beginWork(fiber: Fiber): Fiber | undefined {
  if (fiber.tag === WorkTag.HostComponent) {
    // 宿主节点diff
    diffHostComponent(fiber);
  } else if (fiber.tag === WorkTag.ClassComponent) {
    // 类组件节点diff
    diffClassComponent(fiber);
  } else if (fiber.tag === WorkTag.FunctionComponent) {
    // 函数组件节点diff
    diffFunctionalComponent(fiber);
  } else {
    // ... 其他类型节点，省略
  }
}

function diffHostComponent(fiber: Fiber) {
  // 新增节点
  if (fiber.stateNode == null) {
    fiber.stateNode = createHostComponent(fiber);
  } else {
    updateHostComponent(fiber);
  }

  const newChildren = fiber.pendingProps.children;

  // 比对子节点
  diffChildren(fiber, newChildren);
}

function diffClassComponent(fiber: Fiber) {
  // 创建组件实例
  if (fiber.stateNode == null) {
    fiber.stateNode = createInstance(fiber);
  }

  if (fiber.hasMounted) {
    // 调用更新前生命周期钩子
    applybeforeUpdateHooks(fiber);
  } else {
    // 调用挂载前生命周期钩子
    applybeforeMountHooks(fiber);
  }

  // 渲染新节点
  const newChildren = fiber.stateNode.render();
  // 比对子节点
  diffChildren(fiber, newChildren);

  fiber.memoizedState = fiber.stateNode.state;
}

function diffChildren(fiber: Fiber, newChildren: React.ReactNode) {
  let oldFiber = fiber.alternate ? fiber.alternate.child : null;
  // 全新节点，直接挂载
  if (oldFiber == null) {
    mountChildFibers(fiber, newChildren);
    return;
  }

  let index = 0;
  let newFiber = null;
  // 新子节点
  const elements = extraElements(newChildren);

  // 比对子元素
  while (index < elements.length || oldFiber != null) {
    const prevFiber = newFiber;
    const element = elements[index];
    const sameType = isSameType(element, oldFiber);
    if (sameType) {
      newFiber = cloneFiber(oldFiber, element);
      // 更新关系
      newFiber.alternate = oldFiber;
      // 打上Tag
      newFiber.effectTag = UPDATE;
      newFiber.return = fiber;
    }

    // 新节点
    if (element && !sameType) {
      newFiber = createFiber(element);
      newFiber.effectTag = PLACEMENT;
      newFiber.return = fiber;
    }

    // 删除旧节点
    if (oldFiber && !sameType) {
      oldFiber.effectTag = DELETION;
      oldFiber.nextEffect = fiber.nextEffect;
      fiber.nextEffect = oldFiber;
    }

    if (oldFiber) {
      oldFiber = oldFiber.sibling;
    }

    if (index == 0) {
      fiber.child = newFiber;
    } else if (prevFiber && element) {
      prevFiber.sibling = newFiber;
    }

    index++;
  }
}

function completeWork(fiber) {
  const parent = fiber.return;

  // 到达顶端
  if (parent == null || fiber === topWork) {
    pendingCommit = fiber;
    return;
  }

  if (fiber.effectTag != null) {
    if (parent.nextEffect) {
      parent.nextEffect.nextEffect = fiber;
    } else {
      parent.nextEffect = fiber;
    }
  } else if (fiber.nextEffect) {
    parent.nextEffect = fiber.nextEffect;
  }
}

function commitAllWork(fiber) {
  let next = fiber;
  while (next) {
    if (fiber.effectTag) {
      // 提交，偷一下懒，这里就不展开了
      commitWork(fiber);
    }
    next = fiber.nextEffect;
  }

  // 清理现场
  pendingCommit = nextUnitOfWork = topWork = null;
}

/**
 *
 * @param {*} fn  我们请求数据交互的函数，返回一个数据请求的Promise
 */
function createFetcher(fn) {
  const fetcher = {
    status: "pedding",
    result: null,
    p: null,
  };
  return function () {
    const getDataPromise = fn();
    fetcher.p = getDataPromise;
    getDataPromise.then((result) => {
      /* 成功获取数据 */
      fetcher.result = result;
      fetcher.status = "resolve";
    });

    if (fetcher.status === "pedding") {
      /* 第一次执行中断渲染，第二次 */
      throw fetcher;
    }
    /* 第二次执行 */
    if (fetcher.status) return fetcher.result;
  };
}