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

2024-07-16 14:11| 来源: 网络整理| 查看: 265

文章目录前言类组件通过function定义通过class定义函数组件虚拟Dom分类如何创建虚拟DOMjsxReact.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 return React.createElement(Router); }; 通过class定义 export class App extends React.PureComponent{ render() { return } /> '/'} element={} /> } } 函数组件

函数组件就仅仅是以函数名义去定义一个返回了ReactNode的函数；

function ThreeBox() { return demo } 虚拟Dom分类

虚拟DOM分为组件元素和非组件元素，组件元素是通过组件创建的，标签首字母是大写的形式，而非组件元素是小写的标签，类似html元素；

如何创建虚拟DOM jsx

使用标签的形式创建一个元素，例如

React.createElement

一般第三方框架都是以这种方式创建虚拟DOM，例如

React.createElement(Router, {prop});

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

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

【本文地址】

公司简介

联系我们