新的一年，从手写mini react开始

const element = <span class='text'>FE情报局</span>
const root = document.getElementById('root')
ReactDOM.render(element, root)

// const element = <span class='text'>FE情报局</span>
const element = React.createElement(
  'span',
  {
    class: 'text'
  },
  'FE情报局'
)

const element = {
  type: 'span',
  props: {
    class: 'text',
    children: 'FE情报局'
  }
}

// ReactDOM.render(element, root)
const node = document.createElement(element.type)
node['class'] = ele.props.class

const text = document.createTextNode('')
text['nodeValue'] = ele.props.children

node.appendChild(text)
root.appendChild(node)

const ele = (
  <div class='box'>
    <a>FE情报局</a>
    <br />
  </div>
)
const root = document.getElementById('root')
ReactDOM.render(ele, root)

function createElement(type, props, ...children){
  return {
    type,
    props: {
      ...props,
      children
    }
  }
}

const element = createElement(
  'div',
  {
    class: 'box',
  },
  createElement('a', null, 'FE情报局'),
  createElement('br')
)

function createElement(type, props, ...children){
  return {
    type,
    props: {
      ...props,
      children: children.map(child => {
        if(typeof child === 'object'){
          return child
        }
        return createTextElement(child)
      })
    }
  }
}

// 编写createTextElement，同样返回虚拟dom，也就是一个js对象
function createTextElement(text) 
{
  return {
    type: 'TEXT_ELEMENT',
    props: {
      nodeValue: text,
      children: []
    }
  }
}

const MiniReact = {
  createElement
}

function render(ele, container){
  // 先判断ele.type是否为text然后执行对应的逻辑
  const dom = ele.type === 'TEXT_ELEMENT' ? document.createTextNode('') : document.createElement(ele.type)
  // props中属性追加到dom元素中，但是要注意去除children属性，所以要先做一层过滤
  const isProperty = key => key !== 'children'
  Object.keys(ele.props).filter(isProperty).forEach(name => {
    dom[name] = ele.props[name]
  })
  
  // 将children遍历调用render
  ele.props.children.forEach(child =>
    render(child, dom)
  )
  
  container.appendChild(dom)
}

let nextUnitOfWork = null

function workLoop(deadline) {
  let shouldYield = false
  while(nextUnitOfWork && !shouldYield){
    nextUnitOfWork = performUnitOfWork(nextUnitOfWork)
    shouldYield = deadLine.timeRemaining() < 1
  }
  requestIdleCallback(workLoop)
}

requestIdleCallback(workLoop)

function performUnitOfWork(nextUnitOfWork){
  // TODO
}

<div>
  <h1>
    <p />
    <a />
  </h1>
  <h2 />
</div>

function createDom(fiber){
  const dom = fiber.type === 'TEXT_ELEMENT' ? document.createTextNode('') : document.createElement(fiber.type)
  
  const isProperty = key => key !== 'children'
  Object.keys(ele.props).filter(isProperty).forEach(name => {
    dom[name] = ele.props[name]
  })
  return dom
}

function render(element, container){
  nextUnitOfWork = {
    dom: container,
    props: {
      children: [element]
    }
  }
}

function performUnitOfWork(fiber){
  // 查看当前fiber是否已经生成dom
  if(fiber.dom){
    fiber.dom = createDom(fiber)
  }
  // 存在父节点则挂载当前节点
  if(fiber.parent){
    fiber.parent.dom.appendChild(fiber.dom)
  }
  // 创建子节点fiber
  const elements = fiber.props.children
  let index = 0
  let prevSibling = null
  
  // 然后我们将其添加到fiber树当中，将其设置为子节点或者兄弟节点
  while(index < elements.length){
    const element = elements[index]
    const newFiber = {
      type: element.type,
      props: element.props,
      parent: fiber,
      dom: null
    }
    if(index === 0){
      fiber.child = newFiber
    }else{
      prevSibling.sibling = newFiber
    }
    
    prevSibling = newFiber
    index++
  }
  
  // 搜索逻辑
  if(fiber.child){
    return fiber.child
  }
  let nextFiber = fiber
  while(nextFiber){
    if(nextFiber.sibling){
      return nextFiber.sibling
    }
    nextFiber = nextFiber.parent
  }
}

if(fiber.parent){
  fiber.parent.dom.appendChild(fiber.dom)
}


我们需要定义一个wipRoot的变量，表示work in progress root，然后将它的引用地址复制给nextUnitOfWork


let wipRoot = null
let currentRoot = null

function render(element, container){
  wipRoot = {
    dom: container,
    props: {
      children: [element]
    },
    alernate: currentRoot
  }
  nextUnitOfWork = wipRoot
}

// workLoop函数中，需要增加commitRoot时机
function workLoop(deadline) {
  let shouldYield = false
  while(nextUnitOfWork && !shouldYield){
    nextUnitOfWork = performUnitOfWork(nextUnitOfWork)
    shouldYield = deadLine.timeRemaining() < 1
  }
  
  if(!nextUnitOfWork $$ wipRoot){
    commitRoot()
  }
  
  requestIdleCallback(workLoop)
}

function commitRoot(){
  commitWork(wipRoot.child)
  currentRoot = wipRoot
  wipRoot = null
}

function commitWork(fiber){
  if(!fiber) return
  const domParent = fiber.parent.dom
  domParent.appendChild(fiber.dom)
  commitWork(fiber.child)
  commitWork(fiber.sibling)
}

// if(fiber.parent){
//   fiber.parent.dom.appendChild(fiber.dom)
// }

const elements = fiber.props.children
reconcileChildren(fiber, elements)

function reconcileChildren(wipFiber, elements) {
  let index = 0
  // 旧节点，上次渲染的内容
  let oldFiber =
    wipFiber.alternate && wipFiber.alternate.child
  let prevSibling = null
  
  // element是我们要渲染的内容
  elements.forEach((element, index) => {
    let newFiber = null
    const sameType = oldFiber && element && oldFiber.type === element.type
    
    // 如果旧的 fiber 和新的元素有相同的类型，我们可以保留 DOM 节点并用新的 props 更新它
    if(sameType){
      newFiber = {
        type: oldFiber.type,
        props: element.props,
        dom: oldFiber.dom,
        parent: wipFiber,
        alternate: oldFiber,
        effectTag: 'UPDATE'
      }
    }
    
    // 如果类型不同并且有一个新元素，则意味着我们需要创建一个新的 DOM 节点
    if(!sameType && element){
      newFiber = {
        type: element.type,
        props: element.props,
        dom: null,
        parent: wipFiber,
        alternate: null,
        effectTag: "PLACEMENT",
      }
    }
    
    // 如果类型不同并且有旧fiber，我们需要删除旧节点
    if (oldFiber && !sameType) {
      oldFiber.effectTag = "DELETION"
      deletions.push(oldFiber)
    }
  })
}