React入门（一）

JSX(JAVASCRIPT AND XML[HTML])语法

• ReactDOM.render([JSX],[container],[callback])：把JSX元素渲染在页面

  // 不建议把JSX直接渲染在BODY中，但是可以这么干
  ReactDOM.render(<div>Hello world!</div>,document.body, () => {
    console.log(1);
  })
  

• JSX中的{ }存放的是JS表达式，不能直接放入对象数据类型的值（除不含对象的数组和几种特殊情况外:style设置成对象值才行，例如style={{color:'red'}}）

  let obj = {name:"leonard"};
  // Uncaught Error: Objects are not valid as a React child
  ReactDOM.render(<>
      {obj}    
  </>, document.getElementById('root'));
  

• null和undefined代表空元素，什么也不显示

  ReactDOM.render(<>
    {null}    // nothing
  </>, document.getElementById('root'))
  

• 数组遍历（需要给创建元素设定唯一的key值）

  let arr = [10,20,30];
  ReactDOM.render(<div>
      {arr.map(item=>{
          return <span key={item}>{item}</span>
      })}   
  </div>, document.getElementById('root'));
  

• 样式类名是className而不是class

模拟实现虚拟DOM转换为真实DOM

• 虚拟DOM转换为真实DOM的过程
  1.基于babel-preset-react-app把JSX变为React.createElement()
React.createElement()中的参数含义：
      第一项为标签名（或者组件名）
      第二项为给标签设置的属性，此项为空则显示为null
      第三项或者更多项：标签的子节点
  2.执行React.createElement()创建虚拟DOM对象
  3.ReactDOM.render(JSX生成的对象，容器，回调函数)把虚拟DOM对象变为真实的DOM对象（渲染到页面中）
• 代码实现

export function createElement(type, props, ...childrens) {
    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
    };
}

export 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
        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':
                !(value instanceof Array) ? value = [value] : null;
                value.forEach((item, index) => {
                    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();
}