React 组件的两种定义方式

1. 函数式组件

<div id="test"></div>
<script type="text/babel">
	//1.创建函数式组件
	function MyComponent() {
		console.log(this); // 此处的this是undefined，因为babel编译后开启了严格模式
		return <h2>我是用函数定义的组件</h2>;
	}
	//2.渲染组件到页面
	ReactDOM.render(<MyComponent />, document.getElementById('test'));
</script>

执行了ReactDOM.render(<MyComponent/>.......)之后，发生了：

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

2. 类式组件

<div id="test"></div>
<script type="text/babel">
	//1.创建类式组件
	class MyComponent extends React.Component {
		render() {
			return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>;
		}
	}
	//2.渲染组件到页面
	ReactDOM.render(<MyComponent />, document.getElementById('test'));
</script>

• render()是放在MyComponent的原型对象上，供实例使用。
• render()中的this：MyComponent的实例对象 <=> MyComponent组件实例对象。

执行了ReactDOM.render(<MyComponent/>.......)之后，发生了：

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