React之函数式组件与类组件的区别

最近被安排了一个以Umi（听过）为框架的项目（最后一次代码更新在一年前），起初内心是拒绝的，奈何领导拍着我的肩膀说：“小伙子，组织相信你，给你三天时间学习！！！”；听了领导的一席“真言”，我顿时内牛满面(╥╯^╰╥)，没办法只能硬着头皮上了…
当拉下源码打开vscode那一刻，我的内心是崩溃的；文件全是以jsx结尾，文件内容全是自定义标签（首字母大写那种）…
费了老大劲启动了项目，就是一个erp内部使用项目，页面基本都是表格，交互也都是增删改查之类的，完了之后就去看了Umi官方文档，结果发现要看懂React代码还是得学习一下文档…
花了一上午时间看React文档结合本地源码，总算是有点眉目了，基本看得懂组件是怎么建立的、父子组件之间的参数是怎么传递的…
接着就到了上手的时候了：
函数式组件：

import React, { useState } from 'react';
export function Index(props) {
	console.log(props)//这个props就是父组件携带的参数
	const [loading, setLoading] = useState(false);//状态管理
	return (
		<>//retrun中必须要有一个根节点，可以是标签或自定义标签或空标签，个人觉得空标签看起来逼格高
		//html部分
		</>	
	)
}

类组件：

import React from 'react';
class Index extends React.Component {
  constructor(props){//构造器
    console.log(props.location.query.selectedRows)
    super();
  }
  state={
    loading: false
  }
  render() {
  const { loading } = this.state//解构赋值发，减少代码书写
	return (
		<div>
		//html部分
		</div>	
	)
  }
 }
 export default Index;

总结：
1.很明显可以看出二者的书写方式不同，效果相同。
函数组件是一个纯函数，它接收一个props对象返回一个react元素。
组件需要去继承React.Component并且创建render函数返回react元素，这将会要更多的代码。
2.状态管理不同。
函数组件是一个纯函数，你不能在组件中使用setState()，这也是为什么把函数组件称作为无状态组件。
类组件中可以定义在state中定义变量，然后通过this.state.xxx去改变其状态，是不是和Vue中的data有点相似（本人一直以Vue为框架开发项目）。
以上就是三天来略懂的知识点，有误的地方希望可以提出来，大神尽管指点。
学了三天React最大的感受就是：“Vue的书写方式好Low啊”（仅代表个人观点，勿喷）。