React中super()和super(props)的区别小结
1. ES6类
在ES6中，通过extends关键字实现类的继承，方式如下：
class sup{
constructor(name){
this.name=name;
}
printName(){
console.log(this.name)
}
}
class sub extends sup{
constructor(name,age){
super(name) //super 代表的是父类的构造函数
this.age=age;
}
printAge(){
console.log(this.age)
}
}
let rui=new sub('rui',21);
rui.printAge() //21
rui.printName() //rui
在上面的例子在子中，可以看到通过super关键字实现调用父类，super代替的是父类的构建函数，使用super(name)相当于调sup.prototype.constructor.call(this.name)
如果在子类中不使用super关键字，则会引发报错
报错的原因是 子类没有自己的this对象,它只能继承父类的this对象，然后对其进行加工而super()就是将父类中的this对象继承给子类的，没有super()子类就得不到this对象
如果先调用this ，再初始化super(),同样是禁止的行为
所以在子类的constructor 中 ，必须先用super 才能引用this
2. 类组件
在React中，类组件是基于es6的规范实现的，继承React.Component,因此如果用到constructor就必须写super()才初始化this
这时候，在调用super()的时候，我们一般都需要传入props作为参数，如果传不进去，React内部也会将其定义在组件实例中
// React 内部 const instance = new YourComponent(props); instance.props = props;
所以无论有没有constructor，在render中this.props都是可以使用的，这是React自动附带的，是可以不写的
class HelloMessage extends React.Component{
render(){
return <div>hello {this.props.name}</div>
}
}
但是也不建议使用super()代替super(props)因为在React会在类组件构造函数生成实例后再给this.props附值，所以 不传递props在super的情况下，调用this.props为undefined,情况如下：
class Button extends React.Component{
constructor(props){
super() //没传入props
console.log(props) //{}
console.log(this.props) //undefined
}
}
而传入props的则都能正常访问，确保了this.props在构造函数执行完毕之前已经被赋值，更符合逻辑
class Button extends React.Component{
constructor(props){
super(props) /
console.log(props) //{}
console.log(this.props) //{}
}
}
3. 总结
在React 中，类组件基于ES6，所以在constructor中必须使用super在调用super过程，无论是否传入props，React内部都会将props赋值给组件实例props属性中，如果调用了super(),那么this.props在super和构造函数结束之间仍然是undefined
到此这篇关于React中super()和super(props)的区别小结的文章就介绍到这了,更多相关React super()和super(props)内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
react-router browserHistory刷新页面404问题解决方法
本篇文章主要介绍了react-router browserHistory刷新页面404问题解决方法，非常具有实用价值，需要的朋友可以参考下2017-12-12
这篇文章主要为大家详细介绍了React实现歌词滚动效果(跟随音乐播放使劲按滚动),文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2024-02-02
这篇文章主要介绍了react中antd文本框限制输入中文方式详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
useEffect是react v16.8新引入的特性。我们可以把useEffect hook看作是componentDidMount、componentDidUpdate、componentWillUnmounrt三个函数的组合2022-10-10
React关于antd table中select的设值更新问题
这篇文章主要介绍了React关于antd table中select的设值更新问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
本文将介绍在React Native开发中常见的性能优化问题和解决方案,包括ScrollView内无法滑动、热更新导致的文件引用问题、高度获取、强制横屏UI适配、低版本RN适配iOS14、缓存清理、navigation参数取值等,感兴趣的朋友一起看看吧2024-01-01
使用 Rails API 构建一个 React 应用程序的详细步骤
这篇文章主要介绍了使用 Rails API 构建一个 React 应用程序的详细步骤，主要包括后端：Rails API部分，前端：React部分及React组件的相关操作，具有内容详情跟随小编一起看看吧2021-08-08
本文主要介绍了react18中react-redux状态管理的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
解析react 函数组件输入卡顿问题 usecallback react.memo
useMemo是一个react hook,我们可以使用它在组件中包装函数。可以使用它来确保该函数中的值仅在依赖项之一发生变化时才重新计算，这篇文章主要介绍了react 函数组件输入卡顿问题 usecallback react.memo,需要的朋友可以参考下2022-07-07
这篇文章主要为大家介绍了React Suspense前后端IO异步操作处理示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
最新评论