React 定义组件

定义组件有两种：

第一种：函数组件；

第二种：类组件；

组件名首字母大写

只有一个根标签

标签要闭合</>

函数组件定义：(适合简单组件的定义)

<div id='test'></div>
    <script type="text/babel">
        function MyComponent(){
            console.log(this);
            return <h1>函数组件定义</h1>
        }
        const vDom = <MyComponent/>
        ReactDOM.render(vDom,document.getElementById('test'))
    </script>

 函数组件定义中的this指向的值为undefined,原因是babel编译使用的是严格模式，严格模式下，禁止函数中的this指向window（函数组件）

类组件定义：（适合复杂组件的定义）

1.在react中的类组件必须继承于React.Component.

2.类组件中必须要有render方法，而且render必须要有返回值.

3.render是在Component原型上的，render方法中的this指向组件实例.

4.在react中触发render方法，render方法在渲染时,会自动生成类组件实例.

<div id='test'></div>
    <script type="text/babel">
        class MyComponent extends React.Component{
            render(){
                return <h1>类组件定义</h1>
            }
        }
        const vDom = <MyComponent/>
        ReactDOM.render(vDom,document.getElementById('test'))
    </script>