3-react-组件类型

函数式组件

现在开始渐渐转换为函数式组件了，要好好学函数式组件 

    //1.创建函数式组件
		function MyComponent(){
			return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>
		}
		//2.渲染组件到页面
		ReactDOM.render(<MyComponent/>,document.getElementById('test'))
		/* 
			执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？
					1.React解析组件标签，找到了MyComponent组件。
					2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。
		*/

类式组件

//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，随后呈现在页面中。
		*/

注意 

1. 组件名必须首字母大写
2. 虚拟DOM元素只能有一个根元素
3. 虚拟DOM元素必须有结束标签

 组件渲染的过程

1. React内部会创建组件实例对象（函数式组件没有实例对象没有this，类式组件有实例对象，this指向实例对象，但是回调函数中没有this，所以一些回调函数使用箭头函数来编写）。
2. 调用render()得到虚拟DOM, 并解析为真实DOM。
3. 插入到指定的页面元素内部。

函数式组件和类组件的优缺点

1. 类式组件性能消耗大，因为类式组件需要创建类的实例，而且不能销毁
2. 函数式组件消耗小，现在有了hooks也有状态了。

之前一直在学类式组件，后来说以后要用函数式组件了，心里有些震惊，觉得类式组件不挺好的吗，今天看到一句话说：因为你学的是前端，搞前端的不能有一点：“别更新了，学不动了”这种想法，所以我们一定要有技术追求！

参考：

https://blog.csdn.net/lizhongyu0922/article/details/107602664