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中的渲染机制以及相关的优化方案，内容包括react渲染步骤、concurrent机制以及产生作用的机会，简单模拟实现 concurrent mode，基于作业调度优先级的思路进行项目优化的两个hooks，感兴趣的小伙伴跟着小编一起来看看吧2023-07-07
react中useState使用:如何实现在当前表格直接更改数据
这篇文章主要介绍了react中useState的使用:如何实现在当前表格直接更改数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
本文介绍了如何在React项目中通过iframe嵌入百度网站的步骤,首先创建一个Baidu.js组件,并在该组件中设置iframe来加载百度,然后在App.js中引入并使用Baidu组件,还讨论了因安全策略可能无法加载某些网站的问题,需要的朋友可以参考下2024-09-09
我们知道在 angular 中数据时双向绑定的；而在 react 中，数据是向一个方向传递：从拥有者到子节点。也就是我们说的单向数据绑定。那如何实现双向绑定呢？下面这篇文章主要给大家介绍了关于React利用插件和不用插件实现双向绑定的方法，需要的朋友可以参考下。2017-07-07
本篇文章主要介绍了React实现菜谱软件的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2021-09-09
React hook 'useState' is calle
这篇文章主要为大家介绍了React hook 'useState' is called conditionally报错解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要介绍了react组件实例属性props,本文结合实例代码给大家简单介绍了props使用方法，代码简单易懂，需要的朋友可以参考下2023-01-01
使用react-virtualized实现图片动态高度长列表的问题
一般我们在写react项目中,同时渲染很多dom节点,会造成页面卡顿, 空白的情况。为了解决这个问题，今天小编给大家分享一篇教程关于react-virtualized实现图片动态高度长列表的问题，感兴趣的朋友跟随小编一起看看吧2021-05-05
useCallback是react中比较重要的一个hook，useCallback 用来返回一个函数，在父子组件传参或者通用函数封装中,起到举足轻重的作用2022-11-11
在启动React应用时,遇到Webpack版本不匹配导致的运行错误,解决方法包括删除全局及局部的webpack和webpack-cli,然后根据项目需求安装特定版本的webpack,本文通过代码示例给大家介绍的非常详细,需要的朋友可以参考下2024-09-09
最新评论