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自定义组件与输出方法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-07-07
这篇文章主要介绍了使用reactjs优化了进度条后页面性能提高了70%的操作技巧，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-04-04
本篇文章主要介绍了React组件通信详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2021-10-10
这篇文章主要为大家介绍了React Hydrate原理源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要为大家通过示例讲解了Remix 设计哲学理念，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
本篇文章主要介绍了使用react实现手机号的数据同步显示功能的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要介绍了浅谈React的最大亮点之虚拟DOM,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要介绍了解读react的onClick自动触发等相关问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
Reactjs + Nodejs + Mongodb 实现文件上传功能实例详解
今天是使用 Reactjs + Nodejs + Mongodb 实现文件上传功能，前端我们使用 Reactjs + Axios 来搭建前端上传文件应用，后端我们使用 Node.js + Express + Multer + Mongodb 来搭建后端上传文件处理应用，本文通过实例代码给大家介绍的非常详细，需要的朋友参考下吧2022-06-06
这篇文章主要介绍了Webpack3+React16代码分割的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
最新评论