1.函数式组件

    // 1.创建函数式组件
        function MyComponent(){
            console.log(this);//此处this是undefined，不是window，因为babel编译后开启了严格模式（strict
            return <h2>我是用函数定义的组件（适用于简单组件的定义）</h2>
        }

    // 2.渲染组件到页面
        ReactDOM.render(<MyComponent/>,document.getElementById("test"));
        console.log(typeof VDOM);
        console.log(VDOM instanceof Object);

执行了ReactDOM.render(<MyComponent/>,……之后发生了什么？

1. React解析组件标签，找到MyComponent组件
2. 发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真是DOM，呈现在页面中。

2.类式组件

        //1.创建类式组件
        class MyComponent extends React.Component {
            render(){
                //render是放在 MyComponent的原型对象上，供实例使用
                //render中的this是 MyComponent的实例对象<=>MyComponent组件（实例）对象
                console.log('render的this',this);
                return <h2>我是用类定义的组件（适用于复杂组件的定义）</h2>
            }
        }
        //2.渲染组件到 页面
        ReactDOM.render(<MyComponent/>,document.getElementById('test'))

执行了ReactDOM.render(<MyComponent/>,……之后发生了什么？

1. React解析组件标签，找到MyComponent组件
2. 发现组件是使用类定义的，随后new出该类的实例，并通过该实例调用到原型上的render方法
3. 将render返回的虚拟DOM转换为真实DOM，呈现在页面中