react怎么引用amazeui里面的组件

Posted 2023-04-15

首先，确定你已经了解了react是干什么的，对react还不了解的请移步这里：react快速入门，我大体总结下吧：你就直接把react理解成能够用js实现web前端的组件化开发的一个框架就好了，它通过虚拟DOM来简化DOM操作提升性能，同时更好的实现模块化封装。再深了也没必要说了。

其次，你还得知道webpack是干什么的，对webpack不了解的请移步这里：webpack官网。这个网站我没有发现偏官方的中文站点，但是CSDN上应该有很多相关的教程。webpack是一个构建工具，能够把所有的静态资源进行编译打包，比如.js、.css、.png、.less等等吧，反正只要是静态的，不是什么php、jsp之类的动态网站文件都能打包。通过它统一管理资源和模块。 参考技术A 由于我的电脑的MacBook不是windows，因此可能安装和操作过程会有略微差异，但是差异不大，下面操作基本通用，不通用的我会指明。或者下面留言即可。

首先，确定你已经了解了react是干什么的，对react还不了解的请移步这里：react快速入门，我大体总结下吧：你就直接把react理解成能够用js实现web前端的组件化开发的一个框架就好了，它通过虚拟DOM来简化DOM操作提升性能，同时更好的实现模块化封装。再深了也没必要说本回答被提问者采纳

为啥react的组件要super

原因

调用super的原因：在ES6中，在子类的constructor中必须先调用super才能引用this。

super(props)的目的：在constructor中可以使用this.props。

最后，可以看下React文档，里面有一段：

在es6中实现继承，直接调用super(name)，就可以直接继承父类的属性和方法，所以super作用就相当于上述的实现继承的步骤，不过es6提供了super语法糖，简单化了继承的实现。

参考技术A 解释一：

调用super的原因：在ES6中，在子类的constructor中必须先调用super才能引用this

super(props)的目的：在constructor中可以使用this.props

最后，可以看下React文档，里面有一段

Class components should always call the base constructor with props.

解释二：

假设在es5要实现继承,首先定义一个父类:

//父类
function sup(name)
this.name = name

//定义父类原型上的方法
sup.prototype.printName = function ()
console.log(this.name)

现在再定义他sup的子类，继承sup的属性和方法:

function sub(name,age)
sup.call(this,name) //调用call方法,继承sup超类属性
this.age = age


sub.prototype = new sup //把子类sub的原型对象指向父类的实例化对象，这样即可以继承父类sup原型对象上的属性和方法
sub.prototype.constructor = sub //这时会有个问题子类的constructor属性会指向sup，手动把constructor属性指向子类sub
//这时就可以在父类的基础上添加属性和方法了
sub.prototype.printAge = function ()
console.log(this.age)

这时调用父类生成一个实例化对象:

let jack = new sub('jack',20)
jack.printName() //输出 : jack
jack.printAge() //输出 : 20
这就是es5中实现继承的方法。而在es6中实现继承:

class sup
constructor(name)
this.name = name


printName()
console.log(this.name)



class sub extends sup
constructor(name,age)
super(name)
this.age = age


printAge()
console.log(this.age)



let jack = new sub('jack',20)
jack.printName() //输出 : jack
jack.printAge() //输出 : 20
对比es5和es6可以发现在es5实现继承，在es5中实现继承:

首先得先调用函数的call方法把父类的属性给继承过来

通过new关键字继承父类原型的对象上的方法和属性

最后再通过手动指定constructor属性指向子类对象

而在es6中实现继承，直接调用super(name)，就可以直接继承父类的属性和方法，所以super作用就相当于上述的实现继承的步骤，不过es6提供了super语法糖，简单化了继承的实现