react知识（二）重写JSX编译原理

调用方法

import {createElement, render} from './self-jsx';

let objJSX = createElement(
    'div',
    {id: 'box', className: 'box', style: {color: 'red'}},
    createElement(
        'h2',
        {className: 'title'},
        '\u7CFB\u7EDF\u63D0\u793A'
    ),
    createElement(
        'div',
        {className: 'content'},
        '\u6E29\u99A8\u63D0\u793A\uFF1A\u8BED\u6CD5\u9519\u8BEF\uFF01'
    ),
    '\u672C\u64CD\u4F5C\u5C31\u662F\u4E00\u4E2A\u6D4B\u8BD5\uFF01'
);
render(objJSX, root);
复制代码

createElement方法

/*
* CREATE-ELEMENT：建立JSX对象
*   参数：至少两个 TYPE/PROPS，CHILDREN这个部分可能没有可能有多个
*/
function createElement(type, props, ...childrens) {
  props = props || {}  // 下面要用in方法
 let ref, key;
 if ('ref' in props) {
     ref = props['ref'];
     props['ref'] = undefined;
 }
 if ('key' in props) {
     key = props['key'];
     props['key'] = undefined;
 }
 return {
     type,
     props: {
         ...props,
         children: childrens.length <= 1 ? (childrens[0] || '') : childrens
     },
     ref,
     key
 };
}
复制代码

render方法

function render(objJSX, container, callBack) {
 let {type, props} = objJSX,
     {children} = props;
 let newElement = document.createElement(type);
 for (let attr in props) {
     if (!props.hasOwnProperty(attr)) break;
     let value = props[attr];
     if (value == undefined) continue;//=>NULL OR UNDEFINED
     
     // 当是事件属性的时候
        let regEvent = /^on/;
        if(regEvent.test(attr)){
            newElement.addEventListener(attr.toUpperCase().substr(2)
            ,value.bind(undefined));
            continue;
        } 
     switch (attr.toUpperCase()) {
         case 'CLASSNAME':
             newElement.setAttribute('class', value);
             break;
         case 'STYLE':
             for (let styleAttr in value) {
                 if (value.hasOwnProperty(styleAttr)) {
                     newElement['style'][styleAttr] = value[styleAttr];
                 }
             }
             break;
         case 'CHILDREN':
             /*
              * 多是一个值：多是字符串也多是一个JSX对象
              * 多是一个数组：数组中的每一项多是字符串也多是JSX对象
              */
             //->首先把一个值也变为数组，这样后期统一操做数组便可
             !(value instanceof Array) ? value = [value] : null;
             value.forEach((item, index) => {
                 //->验证ITEM是什么类型的：若是是字符串就是建立文本节点，若是是对象，咱们须要再次执行RENDER方法，把建立的元素放到最开始建立的大盒子中
                 if (typeof item === 'string') {
                     let text = document.createTextNode(item);
                     newElement.appendChild(text);
                 } else {
                     render(item, newElement);
                 }
             });
             break;
         default:
             newElement.setAttribute(attr, value);
     }
 }
 container.appendChild(newElement);
 callBack && callBack();
}

export {
 createElement,
 render
};

复制代码