React 函数式组件和类式组件

函数式组件

	<script type="text/babel">
		function MyComponent(){
			return <h2>我是用函数定义的组件</h2>
		}
		ReactDOM.render(<MyComponent/>,document.getElementById('test'))
	</script>

上面声明了名为MyComponent的函数式组件。组件名和函数名相同，根据相关的规则，组件名需要首字母大写，相应的，函数式组件的方法名也需要首字母大写。

React在解析组件标签<MyComponent/>时，发现其为函数式组件，随即调用方法，将其返回的虚拟DOM转换为真实DOM。

带有props的函数式组件

<script type="text/babel">
	function MyComponent(props){
		const{name,age} = props;
		return <h2>我是用{name},今年{age}岁</h2>
	}
	ReactDOM.render(<MyComponent name="tom" age="29"/>,document.getElementById('test'))
</script>

函数式组件可以接收props对象，通过组件标签的属性传递。

类式组件

	<script type="text/babel">
		class MyComponent extends React.Component {
			render(){
				return <h2>我是用类定义的组件</h2>
			}
		}
		ReactDOM.render(<MyComponent/>,document.getElementById('test'))
	</script>

上面声明了名为MyComponent的类式组件，组件名与类名一致，类需继承React.Component，并且render方法是必须的，返回虚拟DOM，这里看着和函数式组件类似。组件的使用方法和函数式组件一样，通过组件标签去解析，如果是类式组件，则调用原型上的render方法，将其返回的虚拟DOM转换成真实DOM。

简单对比

函数式组件，又为简单组件，可以接收一个props对象，返回React元素，无state状态管理；相反，类式组件为复杂组件，有状态state管理，也有生命周期。
类式组件在解析时，先要实例化，new一个组件实例，然后调用实例的render方法返回React元素。