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)区别的资料请关注脚本之家其它相关文章！
您可能感兴趣的文章:
相关文章
MUI是一款基于React的UI组件库，可以方便地构建美观的用户界面，使用MUI的DataTable组件和分页器组件可以轻松实现用户列表分页功能，这篇文章使用MUI库实现了用户列表分页功能，感兴趣的同学可以参考下文2023-05-05
React Router v6 的路由懒加载有2种实现方式,1是使用react-router自带的 route.lazy,2是使用React自带的 React.lazy,下面我们就来看看它们的具体实现方法吧2024-04-04
antd-react使用Select组件defaultValue踩的坑及解决
这篇文章主要介绍了antd-react使用Select组件defaultValue踩的坑及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要为大家介绍了JS跨域解决方案react配置反向代理的示例内容详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步2021-11-11
这篇文章主要介绍了react如何添加less环境配置，本文给大家分享遇到问题及解决方案，结合示例代码图文给大家介绍的非常详细，需要的朋友参考下吧2022-05-05
这篇文章主要为大家介绍了React.js前端导出Excel的方式详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
本文主要介绍了React组件中默认封装了很多属性，有的是提供给开发者操作的，其中有三个属性非常重要：state、props、refs。感兴趣的小伙伴可以参考阅读2023-03-03
众所周知，react推出了hooks之后，很多项目就开始往hooks上靠拢，所以也就出现了class和hooks交叉使用的项目。这个时候使用ref需要注意一些东西2021-06-06
这篇文章主要介绍了React性能优化方法总结，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-09-09
这篇文章主要介绍了react中使用usestate踩坑及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
最新评论