import React from 'React';

const title = <h1 className="title">Hello, world!</h1>;

const title = React.createElement('h1', { className: 'title' }, 'Hello, world!');

let element1 = (
  <div id="A1" style={style}>
    A1文本
    <div id="B1" style={style}>
      B1文本
      <div id="C1" style={style}>
        C1文本
      </div>
      <div id="C2" style={style}>
        C2文本
      </div>
    </div>
    <div id="B2" style={style}>
      B2文本
    </div>
  </div>
);

React.createElement(
  'div',
  { id: 'A1' },
  React.createElement(
    'div',
    { id: 'B1' },
    'B1文本',
    React.createElement('div', { id: 'C1' }, 'C1文本'),
    React.createElement('div', { id: 'C2' }, 'C2文本')
  ),
  React.createElement('div', {
    id: 'B2',
  })
);

/**
 * 创建元素（虚拟DOM）的方法
 * @param {*} type  元素的类型 div span p
 * @param {*} config 配置对象 属性 key ref
 * @param  {...any} children 所有的儿子，传入一个数组,如果没有儿子，如<div/>，则为空数组
 */
function createElement(type, config, ...children) {
  return {
    type,
    props: {
      ...config, //属性扩展 id、key、style
      children: children.map(child => {
        //兼容处理，如果是普通元素返回自己，如果是文本类型，返回文本元素对象
        //比方说B1文本那么children就是["B1文本"]，改为了
        //{type:Symbol(ELEMENT_TEXT),props:{text:"B1文本",children:[]}}也不可能有children了
        return typeof child === 'object'
          ? child
          : {
              type: 'ELEMENT_TEXT',
              props: { text: child, children: [] },
            };
      }),
    },
  };
}
const React = {
  createElement,
};
export default React;

import React from './react';

let style = { border: '3px solid red', margin: '5px' };
let element1 = (
  <div id="A1" style={style}>
    A1文本
    <div id="B1" style={style}>
      B1文本
      <div id="C1" style={style}>
        C1文本
      </div>
      <div id="C2" style={style}>
        C2文本
      </div>
    </div>
    <div id="B2" style={style}></div>
  </div>
);
console.log(element1);

// 新建react-dom.js

/**
 * render是要把一个元素渲染到一个容器内部
 * @param {*} element 元素
 * @param {*} container 容器
 */
function render(element, container) {
  let rootFiber = {
    tag: TAG_ROOT, //每个virtual-dom会有一个tag标示此元素类型
    stateNode: container,
    props: { children: [element] },
  };
  scheduleRoot(rootFiber);
}

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

//index.js中
import ReactDOM from './react-dom';

ReactDOM.render(element1, document.querySelector('#root'));

// 指向父级Fiber节点
this.return = null;
// 指向子Fiber节点
this.child = null;
// 指向右边第一个兄弟Fiber节点
this.sibling = null;

function App() {
  return (
    <div>
      i am
      <span>KaSong</span>
    </div>
  );
}

const newFiber = {
  tag:null, //组件类型 CLASS、FUNCTION_COMPONENT、TEXT、HOST等
  type:null  //createElement时接收的节点类型type,如果是原生的节点类型，那么就是一个字符串(div、span等),如果是一个组件(我们自己定义的、或者React内置提供的)那么就是一个变量
  props: null, //虚拟dom属性，如style
  stateNode: null, //如果是原生的节点类型，是虚拟dom对应的真实节点，如果是class/func组件，则是组件实例
  updateQueue: null, // 数据更新队列
  return: null, //父fiber
  alternate: null, //老fiber，用于新旧fiber对比更新
  effectTag: null, //副作用标示，render会收集副作用 增加 删除 更新
  nextEffect: null, //fiber节点组合成effectlist链表，指向链表当前节点的下一个节点
};

// timeout指定多少毫秒之后若浏览器还是没空，则不等了，强制执行
requestIdleCallback(workFunction, { timeout: 2000 });

/**
 * 函数fn接受deadline对象作为参数，deadline对象有两个属性：timeRemaining和didTimeout。
 * timeRemaining() 返回当前帧还剩余的毫秒数。
 * didTimeout 指定的时间是否过期。
 */
function workFunction(deadline) {
  while ((deadline.timeRemaining() > 0 || deadline.didTimeout) && taskList.length > 0) {
    //如果当前帧还有剩余时间，或超时了但是任务还没执行完，就执行任务
    doWork();
  }
  // 如果当前帧没有剩余时间了，就把控制权还给浏览器,在下个帧继续执行任务
  if (taskList.length > 0) {
    requestIdleCallback(workFunction);
  }
}

// 执行requestIdleCallback，workFunction是要执行的函数
requestIdleCallback(workFunction, 2000);

let workInProgressRoot = null; //RootFiber应用的根
let nextUnitOfWork = null; //下一个任务单元

export function scheduleRoot(rootFiber) {
  // rootFiber保存在workInProgressRoot和nextUnitOfWork中
  workInProgressRoot = rootFiber;
  nextUnitOfWork = rootFiber;
}

/**
 * 回调返回浏览器空闲时间，判断是否继续执行任务
 * @param {*} deadline
 */
function workLoop(deadline) {
  //react是否要让出控制权
  let shouldYield = false;
  // 如果当前有下个任务单元，且不需要让出控制权，则处理下个任务单元
  while (nextUnitOfWork && !shouldYield) {
    nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
    // 如果当前帧剩余时间过短，则让出控制权
    shouldYield = deadline.timeRemaining() < 1;
  }
  //如果全部任务单元处理结束，则进入commit
  if (!nextUnitOfWork && workInProgressRoot) {
    console.log('render阶段结束');
    commitRoot();
  }
  //每一帧都要执行这个代码
  window.requestIdleCallback(workLoop, { timeout: 500 });
}

//react询问浏览器是否空闲,这里有个优先级的概念 expirationTime
window.requestIdleCallback(workLoop, { timeout: 500 });

// 每一帧需要穿插执行的内容
function performUnitOfWork(currentFiber) {
  beginWork(currentFiber);
  if (currentFiber.child) {
    return currentFiber.child; //有孩子返回孩子
  }
  // 没孩子
  while (currentFiber) {
    //完成当前节点
    completeUnitOfWork(currentFiber);
    console.log(currentFiber);
    //有弟弟返回弟弟
    if (currentFiber.sibling) {
      return currentFiber.sibling; //有弟弟返回弟弟
    }
    //没弟弟找到父亲继续执行
    currentFiber = currentFiber.return;
  }
}

beginWork(currentFiber);
if (currentFiber.child) {
  return currentFiber.child; //有孩子返回孩子
}

function beginWork(currentFiber) {
  if (currentFiber.tag === TAG_ROOT) {
    //根节点
    updateHostRoot(currentFiber);
  } else if (currentFiber.tag === TAG_TEXT) {
    //文本节点
    updateHostText(currentFiber);
  } else if (currentFiber.tag === TAG_HOST) {
    //原生dom节点
    updateHost(currentFiber);
  }
  // console.log('beginWork', currentFiber);
}

function updateHostRoot(currentFiber) {
  //先处理自己 如果是一个原生节点，创建真实DOM 2.创建子fiber
  let newChildren = currentFiber.props.children; //[element]
  reconcileChildren(currentFiber, newChildren); //reconcile协调
}

function updateHostText(currentFiber) {
  if (!currentFiber.stateNode) {
    //如果此fiber没有创建DOM节点
    currentFiber.stateNode = createDom(currentFiber);
  }
}

function updateHost(currentFiber) {
  if (!currentFiber.stateNode) {
    //如果此fiber没有创建DOM节点
    currentFiber.stateNode = createDom(currentFiber);
  }
  const newChildren = currentFiber.props.children;
  reconcileChildren(currentFiber, newChildren);
}

function createDom(currentFiber) {
  //文本节点
  if (currentFiber.tag === TAG_TEXT) {
    return document.createTextNode(currentFiber.props.text);
  } else if (currentFiber.tag === TAG_HOST) {
    // 其他原生dom节点 如div span
    let stateNode = document.createElement(currentFiber.type);
    //处理属性
    setProps(stateNode, {}, currentFiber.props);
    return stateNode;
  }
}

function reconcileChildren(currentFiber, newChildren) {
  let newChildIndex = 0; //新子节点的索引
  let prevSibiling; //上一个新的子fiber
  //遍历我们子虚拟DOM元素数组，为每一个虚拟DOM创建子Fiber
  while (newChildIndex < newChildren.length) {
    let newChild = newChildren[newChildIndex]; //取出虚拟DOM节点
    let tag;
    if (newChild.type == ELEMENT_TEXT) {
      tag = TAG_TEXT;
    } else if (typeof newChild.type === 'string') {
      tag = TAG_HOST; //如果type是字符串，那么这是一个原生DOM节点div
    }
    // 处理当前fiber的子fuber
    let newFiber = {
      tag,
      type: newChild.type,
      props: newChild.props,
      stateNode: null, //div还没有创建DOM元素
      return: currentFiber, //父Fiber returnFiber
      effectTag: PLACEMENT, //副作用标示，render会收集副作用 增加 删除 更新 第一次进来都是增加
      nextEffect: null, //effect list也是一个单链表 顺序和完成顺序一样 节点可能会少 只放需要变动的fiber节点,其他的绕过
    };
    if (newFiber) {
      if (newChildIndex == 0) {
        //如果索引是0，就是大儿子
        currentFiber.child = newFiber;
      } else {
        prevSibiling.sibling = newFiber; //大儿子指向弟弟
      }
      prevSibiling = newFiber;
    }

    newChildIndex++;
  }
}

if (newFiber) {
  if (newChildIndex == 0) {
    //如果索引是0，就是大儿子
    currentFiber.child = newFiber;
  } else {
    prevSibiling.sibling = newFiber; //大儿子指向弟弟
  }
  prevSibiling = newFiber;
}

// 每一帧需要穿插执行的内容
function performUnitOfWork(currentFiber) {
  beginWork(currentFiber);
  if (currentFiber.child) {
    return currentFiber.child; //有孩子返回孩子
  }
+  // 没孩子
+  while (currentFiber) {
+    //完成当前节点
+    completeUnitOfWork(currentFiber);
+    console.log(currentFiber);
+    //有弟弟返回弟弟
+    if (currentFiber.sibling) {
+      return currentFiber.sibling; //有弟弟返回弟弟
+    }
+    //没弟弟找到父亲继续执行
+    currentFiber = currentFiber.return;

  }
}

// 没有下一个任务单元,fiber处理结束，effectlist生成完成
if (!nextUnitOfWork && workInProgressRoot) {
  console.log('render阶段结束');
  commitRoot();
}

function commitRoot() {
  //拿到effect list 的firstEffect，从first effect开始挂载
  let currentFiber = workInProgressRoot.firstEffect;
  while (currentFiber) {
    commitWork(currentFiber);
    currentFiber = currentFiber.nextEffect;
  }
  workInProgressRoot = null;
}
function commitWork(currentFiber) {
  if (!currentFiber) return;
  let returnFiber = currentFiber.return;
  let returnDOM = returnFiber.stateNode;
  //console.log(currentFiber)
  if (currentFiber.effectTag === PLACEMENT) {
    returnDOM.appendChild(currentFiber.stateNode);
  }
  currentFiber.effectTag = null;
}

//#root 为root的stateNode
ReactDOM.render(element, document.querySelector('#root'));