React类组件中super()和super(props)的区别详解
更新时间：2024年01月22日 11:32:27 作者：王 歪歪
这篇文章给大家详细介绍了React类组件中super()和super(props)有什么区别,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
ES6类的继承
在ES6中，通过extends关键字实现类的继承，如下：
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 tom = new sub("tom",20);
tom.printName(); //tom
tom.printAge(); //20
通过super关键字实现调用父类，super代替父类的构建函数，相当于调用sup.prototype.constructor.call(this,name),如果子类不适用super关键字会报错，报错的原因是子类没有自己的this对象，他只是继承父类的this对象，然后对其加工，也不能先用this，再调用super
类组件的继承
类组件继承React.Component，因此如果用到constructor就必须写super（），才能初始化this，在调用super的时候一般要传入props作为参数，如果不传进去，react内部也会将其定义在组件实例中
// react内部 const instance = new ExampleComponent(props); instance.props = props;
所以无论有没有constructor，在render中的this.props都是可以使用的，在react中，使用super（），不传入props，调用this.props为undefined，如下：
class Button extends React.Component{
constructor(props){
super();
console.log(this.props); //undefined
}
}
如果传入props：
class Button extends React.Component{
constructor(props){
super(props);
console.log(this.props); //{}
}
}
总结区别
不管是super（）还是super（props），React内部都会将props赋值给组件实例props属性中，如果只调用super()，那么在构造函数结束之前，使用this.props还是undefined
以上就是React类组件中super()和super(props)的区别详解的详细内容，更多关于React super()和super(props)区别的资料请关注脚本之家其它相关文章！
您可能感兴趣的文章:
相关文章
这篇文章主要为大家介绍了React Native项目中启用Hermes引擎实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
map()方法是在React中常用的数组处理方法之一,可以用于遍历数组、生成组件列表以及进行数据转换等操作,通过合理运用map()方法,可以更灵活地处理和展示数据,下面给大家讲解react map使用方法,感兴趣的朋友一起看看吧2023-10-10
前端应用大多数是SPA（单页应用程序），也就是只有一个HTML页面的应用程序。因为它的用户体验更好、对服务器压力更小，所以更受欢迎。为了有效的使用单个页面来管理多页面的功能，前端路由应运而生2022-09-09
本文通过代码给大家介绍了使用react-color实现前端取色器的方法，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2021-11-11
dva是一个基于redux和redux-saga的数据流方案，然后为了简化开发体验，dva额外内置了react-router,fetch，可以激烈为一个轻量级的应用框架，这篇文章主要介绍了react dva实现,需要的朋友可以参考下2021-11-11
这篇文章主要为大家详细介绍了react中的axios模块，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
react组件中的constructor和super知识点整理
这篇文章主要介绍了react组件中的constructor和super知识点整理,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-08-08
this的本质可以这样说，this跟作用域无关的，只跟执行上下文有关。接下来通过本文给大家介绍React中es6创建组件this的方法，非常不错，感兴趣的朋友一起看看吧2016-08-08
我们项目中通常会需要引入字体,所以下面这篇文章主要给大家介绍了关于如何在React项目中引入字体文件并使用的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-08-08
利用React-router+Webpack快速构建react程序
目前 React、Webpack 等技术如火如荼，你是不是还在愁苦如何把这些杂乱的知识怎么学习一下，开启一段新的前端开发之路呢？那么这篇将给大家运用示例代码详细的介绍使用React-router和Webpack如何快速构建一个react程序，感兴趣的朋友们下面来一起看看吧。2016-10-10
最新评论