/** @jsx createElement */

function createElement(type, config, ...args) {

  const props = Object.assign({}, config);

  const hasChildren = args.length > 0;

  const rawChildren = hasChildren ? [].concat(...args) : [];

  props.children = rawChildren

    .filter(c => c != null && c !== false)

    .map(c => c instanceof Object ? c : createTextElement(c));

    // 过滤-空-值, 剩下的-不属于-Object的值 -> createTextElement -> 变为 类型为TEXT_ELEMENT- Didact元素

  return { type, props };

}

​

function createTextElement(value) {

  // 规范数据

  return createElement("TEXT ELEMENT", { nodeValue: value });

}

​

function render(element, parentDOM) {

    //获取元素的类型与属性信息

    const { type, props } = element;

​

    //需要对Text类型元素做特殊处理

    const isTextElement = type === "TEXT ELEMENT";

​

​

    //调用浏览器API创建相应的DOM

    const dom = isTextElement

        ? document.createTextNode("")

        : document.createElement(type);

​

    //处理DOM上的事件监听，以on开头的属性为事件handler属性

    const isListener = name => name.startsWith("on");

​

    //调用浏览器API添加DOM事件处理函数

    Object.keys(props).filter(isListener).forEach(name => {

        const eventType = name.toLowerCase().substring(2); // 取两位后

        dom.addEventListener(eventType, props[name]);

    });

​

    //处理DOM上的普通属性

    const isAttribute = name => !isListener(name) && name != "children";

    Object.keys(props).filter(isAttribute).forEach(name => {

        dom[name] = props[name];

    });

​

    //处理React element上的特殊属性children

    const childElements = props.children || [];

​

    //递归的渲染每一个React元素

    childElements.forEach(childElement => render(childElement, dom));

    parentDOM.appendChild(dom);

}

​

const element = (

  <div id="container">

    <span>Foo</span>

    <a href="/bar">bar</a>

  </div>

);

​

render(element, document.getElementById("root"));

​

​