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表達(dá)式，不能直接放入對象數(shù)據(jù)類型的值（除不含對象的數(shù)組和幾種特殊情況外:style設(shè)置成對象值才行，例如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'))
  

• 數(shù)組遍歷（需要給創(chuàng)建元素設(shè)定唯一的key值）

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

• 樣式類名是className而不是class

模擬實(shí)現(xiàn)虛擬DOM轉(zhuǎn)換為真實(shí)DOM

• 虛擬DOM轉(zhuǎn)換為真實(shí)DOM的過程
  1.基于babel-preset-react-app把JSX變?yōu)?code>React.createElement()
  React.createElement()中的參數(shù)含義：
  ????第一項(xiàng)為標(biāo)簽名（或者組件名）
  ????第二項(xiàng)為給標(biāo)簽設(shè)置的屬性，此項(xiàng)為空則顯示為null
  ????第三項(xiàng)或者更多項(xiàng)：標(biāo)簽的子節(jié)點(diǎn)
  2.執(zhí)行React.createElement()創(chuàng)建虛擬DOM對象
  3.ReactDOM.render(JSX生成的對象，容器，回調(diào)函數(shù))把虛擬DOM對象變?yōu)檎鎸?shí)的DOM對象（渲染到頁面中）
• 代碼實(shí)現(xiàn)

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();
}