react组件的三种定义方法、准确理解类组件函数组件以及使用方法

---

前言

根据官方描述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});

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

本次的内容属个人的总结与体会，仅供朋友们参考和纠正，朋友们小小的赞，就是对我莫大的支持