jsx->js对象 和 render方法

render方法指的是该组件将要如何渲染，一定并且只返回一个React元素。

jsx到JS对象结构

return (
    <div>
        <h1 className='title'>hello</h1>
    </div>
)
Babel 转译 + react.js 构造
return (
    React.createElement(
        "div",
        null,
        React.createElement(
            "h1",
            { className: 'title' },
            "React 小书"
        )
    )
)

JS 对象结构到真实的dom元素

// 过程版
let eleObj = {
  type: 'div', // type 元素类型是div
  props: {
    id: 1,
    className: 'red',
    children: ['hello']
  }
};
// 写一个render方法（把eleObj插入到容器container中去）
function render(eleObj, container) {
  let { type, props } = eleObj; // 解构赋值一下
  let ele = document.createElement(type); // 第一步创建一个dom元素，第二步再把所有属性赋给ele
  for(let attr in props) {
    if(attr == 'children') {
      props[attr].forEach(function(item) {
        let textNode = document.createTextNode(item);
          ele.appendChild(textNode);
      })
    }else if(attr == 'className') {
      ele.setAttribute('class', props[attr]);    
     }else{
      ele.setAttribute(attr, props[attr]);
    }
  }
  container.appendChild(ele);
}

// 完整版
let eleObj = {
  type: 'div', // type 元素类型是div
  props: {
    id: 1,
    className: 'red',
    children: ['hello', {
      type: 'span',
      props: {className: 'blue', children: ['word']}
    }]
  }
};
function render(eleObj, container) {
  let { type, props } = eleObj; // 解构赋值一下，解构出标签的 类型和属性对象
  let ele = document.createElement(type); // 第一步创建一个dom元素，第二步再把所有属性赋给ele
  // 循环props对象
  for(let attr in props) {
    if(attr == 'children') {
      props[attr].forEach(function(item) {
        if(typeof item == 'string') {
          let textNode = document.createTextNode(item);
          ele.appendChild(textNode);
        }else{
          render(item, ele) // 递归
        }
      })
    }else if(attr == 'className') {
      ele.setAttribute('class', props[attr]);    
     }else{
      ele.setAttribute(attr, props[attr]);
    }
  }
  container.appendChild(ele);
}

import ReactDOM from 'react-dom';
// react-dom 负责把这个用来描述 UI 信息的 JavaScript 对象变成 DOM 元素，并且渲染到页面上。

react源码 render方法

render方法可以传入三个参数包括ReactElement、DOM的包裹节点，和渲染结束后执行的回调方法。

render(
    element: React$Element<any>,
    container: DOMContainer,
    callback: ?Function,
  ) {
    invariant(
      isValidContainer(container),
      'Target container is not a DOM element.',
    );
    return legacyRenderSubtreeIntoContainer(
      null,
      element,
      container,
      false,
      callback,
    );
  },

react 工程代码：

ReactDOM.render(
  <React.Fragment>
    <NormalComponent />
    {/* <AA /> */}
    <Main />
  </React.Fragment>,
  document.getElementById('root')
);