React 函数组件底层的渲染机制

1. 函数组件 创建：在SRC目录中，创建一个 xxx.jsx 的文件，就是要创建一个组件；我们在此文件中，创建一个函数，让函数返回JSX视图「或者JSX元素、virtualDOM虚拟DOM对象」；这就是创建了一个“函数组件”！！ 调用：基于ES6Module规范，导入创建的组件「可以忽略.jsx后缀名」，然后像写标签一样调用这个组件即可！

<Component/> 单闭合调用
<Component> ... </Component> 双闭合调用

单闭合调用和双闭合调用的不同点：
<DeomOne title="我是标题" x={10} data={[100, 200]} className="box" style={{ fontSize: '20px' }}>
    <span>hhhh</span>
    <span>嘿嘿嘿</span>
  </DeomOne>

用双闭合的方式我们可以在props子节点通过children形式传递给子组件

 渲染机制
    1 基于babel-preset-react-app把调用的组件转换为createElement格式
        React.createElement(DemoOne, {
            title: "\u6211\u662F\u6807\u9898",
            x: 10,
            data: [100, 200],
            className: "box",
            style: {
                fontSize: '20px'
            }
        })
    2 把createElement方法执行，创建出一个virtualDOM对象！！
        {
            $$typeof: Symbol(react.element),
            key: null,
            props: {title: '我是标题', x: 10, data: 数组, className: 'box', style: {fontSize: '20px'}}, //如果有子节点「双闭合调用」，则也包含children！！
            ref: null,
            type: DemoOne
        }
    3 基于root.render把virtualDOM变为真实的DOM
        type值不再是一个字符串，而是一个函数了，此时：
        + 把函数执行 -> DemoOne()
        + 把virtualDOM中的props，作为实参传递给函数 -> DemoOne(props)
        + 接收函数执行的返回结果「也就是当前组件的virtualDOM对象」
        + 最后基于render把组件返回的虚拟DOM变为真实DOM，插入到#root容器中！！