React 学习笔记（7）：函数式组件和类式组件

React 中组件的定义方式有两种，分别是函数式和类式，首先看看函数式组件的写法。

函数式组件

<script type="text/babel">
	//1.创建函数式组件
	function MyComponent(){
		console.log(this); //此处的this是undefined，因为babel编译后开启了严格模式
		return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>
	}
	//2.渲染组件到页面
	ReactDOM.render(<MyComponent/>,document.getElementById('test'))
	/* 
	执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？
		1.React解析组件标签，找到了MyComponent组件。
		2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。
	*/
</script>

函数式组件需要返回虚拟 DOM，这里的写法是使用 jsx 的形式，babel 会将其编译成 react api 调用的形式。

ReactDOM.render() 执行之后发生了什么：

• ReactDOM.render() 渲染组件时，发现待渲染的组件是函数式组件。
• 调用该函数，获取该函数返回的虚拟 DOM。
• 将虚拟 DOM 转成真实 DOM 并渲染到页面上。

类式组件

<script type="text/babel">
	//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，随后呈现在页面中。
	*/
</script>

类式组件需要定义 render 函数，并且 render 函数需要返回虚拟 DOM。

ReactDOM.render() 执行之后发生了什么：

• ReactDOM.render() 渲染组件时，发现待渲染的组件是类式组件。
• React new 出组件的实例，然后调用实例上的 render 方法获取到虚拟 DOM。
• 将虚拟 DOM 转为真实 DOM 并渲染到页面中。