qiantaobao / blog Goto Github PK

function Hello(){
    return <h1>hello world</h1>
}

function Hello() {
  return React.createElement("h1", null, "hello world");
}

/* 
  首先传入三种类型的参数
  type：当前元素
  config：当前元素属性
  children：当前元素的子元素（包含嵌套元素）
*/
function createElement(type, config, children) {
  /* 
    首先先定义一个props对象，里面存放着config里面的各种属性
    例如 className，style之类
  */
  let props = {};
  for (let propsName in config) {
    props[propsName] = config[propsName];
  }
  /* 
    在嵌套多个元素的时候就会传入多个children
    除掉前面的type，config，剩下的length就是嵌套元素的数量
    根据是单一元素还是多个元素判断要不要放在数组中
  */
  const childrenLength = arguments.length - 2;
  if (childrenLength === 1) {
    props.children = children;
  } else if (childrenLength > 1) {
    let childrenArray = Array(childrenLength);
    for (let i = 0; i < childrenLength; i++) {
      childrenArray[i] = arguments[i + 2];
    }
    props.children = childrenArray;
  }
  /* 
    最后将封装好的props，以及type传入到另一个函数，reactElement当中
    type: 'h1',
    props: {
      className: 'title',
      style: {
        fontSize: '14px'
      },
      children: 'hello, world'
    }
  */
  return reactElement(type, props);
}

function reactElement(type, props) {
  const element = {
    type,
    props
  };
  return element;
}