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

文章目录

  • 前言
  • 类组件
    • 通过function定义
    • 通过class定义
  • 函数组件
  • 虚拟Dom分类
  • 如何创建虚拟DOM
    • jsx
    • React.createElement


前言

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

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


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

你可能感兴趣的:(react学习分享,react.js,javascript,前端)