React源码学习：组件渲染之区分函数组件和类组件

P15-P19.组件渲染之区分函数组件和类组件以及 props 的处理

函数组件

• type 都是一个函数
• type.redner 方法存在，则说明是类组件
• 当前的 babel产一的 vdom里，针对函数式组件，并不存在 vdom.type，而是直接 vdom 则表示这个组件

TinyReact.Component

export default class Component {
  constructor(props) {
    this.props = props;
  }
}

renderComponent

import isFunctionComponent from './isFunctionComponent';
import mountNativeElement from './mountNativeElement';
import isFunction from './isFunction';

export default function mountComponent(vdom, container) {
  let nextVdom = null;
  // class / function component
  if (isFunctionComponent(vdom)) {
    // 函数组件
    nextVdom = buildFunctionComponent(vdom);
  } else {
    //  类组件
    nextVdom = buildClassComponent(vdom);
  }

  // 可能是 function 嵌套的情况
  if (isFunction(nextVdom)) {
    mountComponent(nextVdom, container);
  } else {
    mountNativeElement(nextVdom, container);
  }
}

function buildFunctionComponent(vdom) {
  // class / function component
  // 函数式组件，并传递参数
  return vdom.type(vdom.props || {});
}

function buildClassComponent(vdom) {
  const inst = new vdom.type(vdom.props);
  return inst.render();
}