函数

函数本身很简单，只要执行就行，⚠️函数本生的stateNode为null所以parentNode为wip.return

export function updatedFunctionComponent(wip) {
  console.log("函数式：", wip);
  const { type, props } = wip;
  let children = type(props);
  reconcileChildren(wip,children);
}

类

类就是new type就行了， 在继承的时候将props定义到父类上，同时被类组件继承到原型。 父类原型上写个方法用以区分class和function

export default function Component(props){
    this.props = props
}

Component.prototype.isReactComponent = {}

export function updatedClassComponent(wip) {
  console.log('类',wip);
  const { type, props } = wip;
  const children = (new type(props)).render()
  reconcileChildren(wip,children);
}

文本

文本节点中的type为undefined

child: null
flags: 2
index: null
key: undefined
props: undefined
  return: {type: 'div', key: null, props: {…}, stateNode: div.cla, child: {…}, …}
sibling: null
stateNode: null
type: undefined

因此

  fiber.tag = HostText;
  fiber.props = {children:vnode}

export function updatedHostTextComponent(wip) {
  console.log('文本',wip);
  wip.stateNode = document.createTextNode(wip.props.children)
}

Fragment

type: Symbol(react.fragment) 直接实现就行了