前言
根据官方描述react组件分为函数组件和类组件；是否使用jsx是通过以jsx后缀的文件作区分，在typescript里对jsx的表示是以后缀名为tsx的文件进行区分；下面我将详细描述一下组件的定义和用法。
类组件
之所以称之为类组件，是因为一个组件是有了继承自React.Component的概念，根据继承的写法方式分为了两种定义方式，我们一般会用es6语法class进行定义类组件，称之为class组件，其实在es5中还可以使用function定义；
通过function定义
function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
subClass.__proto__ = superClass;
}
_inheritsLoose(BrowserRouter, React.Component);
function BrowserRouter() {
var _this;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = React.Component.call.apply(React.Component, [this].concat(args)) || this;
return _this;
}
var _proto = BrowserRouter.prototype;
_proto.render = function render() {
return React.createElement(Router);
};
通过class定义
export class App extends React.PureComponent{
render() {
return <BrowserRouter>
<Routes >
<Route path={'/register'} element={<Register />} />
<Route index={undefined} path={'/'} element={<ThreeBox />} />
</Routes>
</BrowserRouter>
}
}
函数组件
函数组件就仅仅是以函数名义去定义一个返回了ReactNode的函数；
function ThreeBox() {
return <div>demo</div>
}
虚拟Dom分类
虚拟DOM分为组件元素和非组件元素，组件元素是通过组件创建的，标签首字母是大写的形式，而非组件元素是小写的标签，类似html元素；
如何创建虚拟DOM
jsx
使用标签的形式创建一个元素，例如
<Register />
React.createElement
一般第三方框架都是以这种方式创建虚拟DOM，例如
React.createElement(Router, {prop});
提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。
本次的内容属个人的总结与体会，仅供朋友们参考和纠正，朋友们小小的赞，就是对我莫大的支持
|