react 定义组件时 super在做什么

最新推荐文章于 2024-03-24 16:02:20 发布
最新推荐文章于 2024-03-24 16:02:20 发布
阅读量325 收藏 1
点赞数
分类专栏： react 文章标签： super react class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iiichigo/article/details/84192879
版权

在ES6的类中，每一个类都有一个contructor（构造器）,当子类去继承父类的时候，父类的constructor需要执行一下，为子类去继承constructor中的一些东西，如果子类自己没有写constructor，默认的会生成一个constructor并且在其中就会执行父类的constructor，执行的方法就是super(),因为子类中的super就是父类的constructor

如果子类自己编写了constructor，那么就需要子类自己去super一次, 否则，子类的this将不被初始化

此时，子类的constructor就可以接收到外界传入的props，但是this上访问不到props，如果在constructor中需要使用到this.props，那么就必须在super中传入props，父类构造器就会为子类的this上挂载props

iiichigo
关注
专栏目录
【掰开揉碎】react中的super(props)
tutututu12345678的博客
01-22 608
在React中，是在类组件的构造函数中调用super关键字的一部分，用于调用父类的构造函数，同时也会将props传递给父类的构造函数。让我们详细解释一下这个用法。
React组件——类组件
m0_58471238的博客
01-15 6724
React组件——类组件
React中Super
a98709473的博客
08-12 495
React中Super
reactnative的js里的super的作用
weixin_30819085的博客
07-19 363
class Blink extends Component{ constructor(props){ super(props); this.state = { showText: true }; setInterval( () => { ...
react 类组件的super（）与super（props）
weixin_45868552的博客
04-15 1242
1、super() : （1）在calss中继承是通过extends关键字来实现的。子类必须在constructor（）中调用super()方法，否则新建实例时会报错 （2）报错原因，是因为子类是没有自己的this对象的，它只能继承父类的this对象，然后对其进行加工，而super就是将父类中的this对象继承给子类，没有super，子类就得不到this对象 2、ES5与ES6关于继承的实现不同之处 （1）new操作符： （1）首先生成一个空对象obj，并将其作为this （2）将空对象的__prot
react 中的 super(props) 作用
m0_37557930的博客
04-28 3549
1、constructor() 这是ES6对类的默认方法，通过 new 命令生成对象实例时自动调用该方法。并且，该方法是类中必须有的，如果没有显示定义，则会默认添加空的constructor( )方法。 2、super() 在class方法中，继承是使用 extends 关键字来实现的。子类必须在 constructor( ) 调用 super() 方法，否则新建实例时会报错。报错的原因是：子类是没有自己的 this 对象的，它只能继承自父类的 this 对象，然后对其进行加工，而 super()..
react 父子组件之间通讯props
10-18
在React中，组件之间的通信是一个核心概念，特别是父子组件之间的通信。本文将详细介绍React中父子组件之间通过props进行通信的方式，以及如何实现父子组件间双向数据流。 首先，我们需要理解props的概念。在React...
React的定义与组件传值
weixin_41040360的博客
07-31 774
React 概念 react是facebook出的一款针对view视图的library(库)。 使用 在使用react做项目的时候可以结合很多第三方的插件开发（路由插件，管理插件等等）。 浏览器只认识.js,.css.html文件，项目通过其他工具转化 使用jsx语法：在js文件中可以直接写html标签 1、组件定义： //在html中 <div id='app'>&l...
React 类组件和函数组件
baidulixueqin的博客
04-19 5075
React 类组件和函数组件 目录 1.类组件和函数组件 2.如何使用 props 和 state 3.如何绑定事件 4.复习 this+ 两个面试题 组件component 一.概念 Element VS Component (元素与组件) //不成文的约定:元素小写，组件大写 const div=React.createElement('div',...) 这是一个React元素(小写) const Div=()=>React.createElement('div',...) 这是一个Rea
react-react组件用于各种圆形方形进度条环形图饼状图等
08-15
4. **自定义样式**："react-super-progress"库允许你通过props来自定义组件的外观。例如，你可以改变进度条的颜色、大小、动画速度等。例如： ```jsx ``` 5. **复杂图表**：除了基本的圆形进度条，该库可能还...
React（2） --super关键字
weixin_30872733的博客
12-09 123
参考：http://www.phonegap100.com/thread-4911-1-1.html Es6中的super可以用在类的继承中，super关键字，它指代父类的实例（即父类的this对象）。子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得...
react中类组件中super的含义
最新发布
铁甲小宝爱编程
03-24 356
4.如果构造函数没有 return 或者 return 一个返回 this 值是基本类型，则返回this；如果 return 一个引用类型，则返回这个引用类型。他本身没有this。需要通过super（） 继承 react.component父类的this。App 是继承的react.component父类的子类。虽然平时可能用state简写方式比较多。1.生成一个空的对象并将其作为 this；指向构造函数的 prototype；定义在super（） 之前，就会报错。普通构造函数new 时候发生的事情。
react——super和props的作用
一个昵称叫铃风的小前端
10-28 150
https://www.cnblogs.com/faith3/p/9219446.html
supert()的功能及原理详解！(以及在react都class组件类都constructor中使用super(props)的原因及原理！)
char56789的博客
10-22 553
我知道supert是继承constructor的参数，但是为什么在react里面，有一些组件使用了super(props)，而有一些没有写，还有在es6里就只是写了supert()，这些区别在哪呢？以及这里的这个constructor(props)…super(props)是起到什么作用呢 ...
谈谈react中的constructor和super的作用
nick_zhang的博客
10-23 687
可以不写constructor，一旦写了constructor，就必须在此函数中写super()，此时组件才有自己的this，在组件的全局中都可以使用this关键字，否则如果只是constructor 而不执行 super() 那么以后的this都是错的！！！ 更多constructor方法和super的作用 class Dividend extends React.Component { constructor(props) { super(props); //子类继承父类的属性和
react中super()的理解
zhengzhengwang的专栏
08-20 1148
es6 class(类) 方法创建组件 1 // 构造函数 会 默认生成 一个原型对象 2 function Person(name,) { 3 this.name = name; 4 } 5 console.log(Person); // 构造函数本身 6 console.log(Person.prototype） // 指向原型对象 7 console.log(Pers
react组件中的constructor和super小知识
aa_mmnn的博客
03-05 1192
1、react中用class申明的类一些小知识 如上图：类Child是通过class关键字申明，并且继承于类React。 A、Child的类型是？ typeofChild === 'function'， 其实就相当于ES5用function申明的构造函数 function Child() { //申明构造函数 } B、Child类调用时候( new Child() )，会优先执行，并且自动执行Child的constructor函数。 constructor()...
React构造函数中为什么要写 super(props)
huangpb的博客
12-14 6450
为什么 super() 要放在构造函数 contructor 最上面执行 ？ ES6 语法中，super 指代父类的构造函数，React 里面就是指代 React.Component 的构造函数。 在你调用 super() 之前，你无法在构造函数中使用 this，JS 不允许这么做。为什么要不允许呢？ 看一下下面这个例子： class Person { constructor(nam...
React的constructor super作用是什么？为什么要进行bind绑定？
springLilly的博客
02-17 1145
最近有些迷惑一个事情，就是在写react组件的时候，有时候写constructor，有时候不写，呃呃呃呃呃，虽然不起眼，但是这到底是一个什么机制呢，好好研究了一下，发现涉及到的东西还不少，这并不是出现在react的东西，而是涉及到类和继承的问题的，决定写下来总结一下。虽然对于使用并不影响，但是只知其然不知其所以然，慢慢就会变得迷茫。。。。 参考文章 Why Do We Write super(props)? 阮一峰：Class 的继承 为什么在React Component需要bind绑定事件 MDN类体和
react类组件的响应性数据怎样定义
06-09
在 React 类组件中，我们可以使用 `state` 来定义响应性数据。可以在类的构造函数中初始化 `state`，也可以在其他方法中通过 `this.setState()` 方法来更新 `state`。例如，下面是一个简单的类组件，定义了一个响应性数据 `count`： ``` import React from 'react'; class Counter extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } handleClick() { this.setState({ count: this.state.count + 1 }); } render() { return ( <div> <p>Count: {this.state.count}</p> <button onClick={() => this.handleClick()}>Click me</button> </div> ); } } export default Counter; ``` 在上面的例子中，我们在构造函数中初始化了 `state`，然后在 `handleClick` 方法中使用 `this.setState()` 方法来更新 `count` 的值。在 `render` 方法中，我们通过 `{this.state.count}` 来显示当前的计数值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值