看这篇文章之前 建议先看看阮一峰 的Class继承 便于更好的理解
首先要知道一个问题
React的父子组件和组件类的继承有什么关系?答案是:没有关系
父子组件:指的得是组件标签包含关系 父子组件通过这种关系实现组件通信
组件继承:通过class实现继承关系
 
es6中class实现的继承
class Father {
constructor() {
this.name = 'zhangsan'
}
getDate = (data) => {
this.haha() //因为继承关系 所以这个this也指向子组件实例 所以可调用子组件的方法
}
getName() {
console.log('父组件的name')
}
}
class Son extends Father {//extends相当于继承了父组件的所有属性和方法
constructor(props) {
super(props)
console.log("this", this)
}
haha = () => {
console.log('子组件的哈哈')
}
getName = () => {
super.getName();//如果不希望自己的getName覆盖父亲组件的getName
console.log('子组件的name')
}
}
let son = new Son();
console.log('son 实例', son)
son.getDate() //子组件的哈哈
son.getName() //父组件的name 子组件的name

看到上面的代码会发现:

说明Es6里 类里面的this 指向实例对象new Son()

那么问题来啦,请问react组件Son里面的this也是完全等价于实例对象new Son()吗? 答案是否:react组件里this=new Son()实例+React包装

Button父组件:用来给子组件传递props

import React from 'react';
import Son from './son';
function Button() {
return <div>
<Son name='sun sun sun' /> {/*子组件 等价于new Son()+react包裹 */}
</div>
}
export default Button;

Father父组件

import React from 'react';
class Father extends React.Component {
constructor(props) {
super(props)
this.moduleName = 'moduleName';
}
getDate = () => {
this.haha()
}
getName() { //不能用做箭头函数 如果是箭头函数则会报错 因为自组件的方法中super.getName()中的super指向的是Father类 如果是箭头函数 指向的是Son的实例对象
console.log('父组件的name')
}
render() {
return 'father'
}
}
export default Father

Son子组件


class Son extends Father{
constructor(props) {
super(props);
console.log("this", this)
}
haha = () => {
console.log('子组件的哈哈')
}
getName = () => {
super.getName();
console.log('子组件的name')
}
render() {
return <div>
<button onClick={this.getName}>点击获取name</button>
<button onClick={this.getDate}>点击获取父亲组件的getDate方法</button>
</div>
}
}
let son = new Son('我是Son的实例参数') //子组件的哈哈
console.log('Son的实例', son) //父组件的name 子组件的name
son.getName()
son.getDate()
export default Son

所以说:react中的this 等价于 new Son()+React内部方法的集合  

那么问题来啦,组件的constructor方法必须要写吗? super必须要加吗?super里面的参数必须要写吗?

1.组件的constructor方法必须要写吗

如果子类没有定义constructor方法,这个方法会被默认添加,代码如下。也就是说,不管有没有显式定义,任何一个子类都有constructor方法。

class ColorPoint extends Point {
} // 等同于
class ColorPoint extends Point {
constructor(...args) {
super(...args);
}
}
// 可见没有写constructor,在执行过程中会自动补上

2.如果constructor()方法定义啦 isuper必须要加吗? 答案是:必须要加

3.super()里面的参数必须要写吗? 答案是:可写可不写 如果想要在constructor()里面使用this.props 则需要传递参数

如果子类super() 不传递props/或者传递props
constructor(props) {
super();
console.log("子类this.props", this.props)
}
父亲类别
constructor() {
super()
console.log("父类this.props", this.props)
}

如果子类super()传递props
constructor(props) {
super(props);
console.log("子类this.props", this.props)
}
父类super()传递props
constructor(props) {
super(props)
console.log("父类this.props", this.props)
}

总结:因为父组件也是继承于 React.Component 所以要想在当前组件里在constructor()里使用this.props 则需要给他的每一层的父组件的super里面加props才能生效值

class实现React继承以及constructor的super的问题的更多相关文章

  1. React中类定义组件constructor 和super

    刚开始学习React没多久,在老师的教程里看到了类组件的使用示例,但是和资料上有些冲突,而引发了一些疑问: 类组件中到底要不要定义构造函数constructor()? super()里边到底要不要传入 ...

  2. react组件中的constructor和super小知识

    react组件中的constructor和super小知识 1.react中用class申明的类一些小知识 如上图:类Child是通过class关键字申明,并且继承于类React. A.Child的类 ...

  3. react的constructor和super的具体含义和使用

    1.constructor( )-----super( )的基本含义 这是ES6对类的默认方法,通过 new 命令生成对象实例时自动调用该方法.并且,该方法是类中必须有的,如果没有显示定义,则会默认添 ...

  4. react中constructor和super()以及super(props)的区别。

    react中这两个API出镜率超级高,但是一直不太懂这到底是干嘛的,有什么用:今天整理一下,方便自己查看同时方便大家. 1.constructor( )-----super( )的基本含义 const ...

  5. React关于constructor与super(props)之间的相爱相杀

    我们先把菜鸟教程的一段代码拿过来分析一下.下面这段代码是用了将生命周期方法添加到类中实现时钟效果. // 将生命周期方法添加到类中 class Clock extends React.Componen ...

  6. class 中的 构造方法、static代码块、私有/公有/静态/实例属性、继承 ( extends、constructor、super()、static、super.prop、#prop、get、set )

     part 1         /**          * << class 中的 static 代码块与 super.prop 的使用          *          * - ...

  7. JAVA继承时this和super关键字

    JAVA继承时this和super关键字 本文主要讨论在方法前使用this或super关键字时,编译器在什么地方查找对应的函数. 在子类中指定this关键字.首先在本类中查找,如果本类中找不到,再在父 ...

  8. 继承及属性查找+super()和mro()+多态

    继承及属性查找+super()和mro()+多态 一. ★继承 1. 什么是继承? 继承就是新建类的一种方式,新建的类我们称为子类或者叫派生类,被继承的类我们称为父类或者基类 子类可以使用父类中的属性 ...

  9. react中constructor()和super()的具体含义以及如何使用

    1.constructor()---super( )的基本含义 constructor()--构造方法 这是ES6对类的默认方法,通过new命令生成对象实例时自动调用该方法.并且,该方法是类中必须有的 ...

随机推荐

  1. cf 手机短信问题

    题目链接:https://vjudge.net/contest/331120#problem/C 题目:你有一部手机,最多显示k个人发的信息,现在收到n条信息,有可能人是相同的人发的.最新的要顶置,当 ...

  2. Maven2: Missing artifact but jars are in place

    那是因为没有update project. 项目右键,maven-update project.

  3. AI: Uninformed search

    What is a search problem: A solution to a search problem is a sequence of actions (a path) from s0 t ...

  4. 【转载】JS导出CSV文件

    转自:http://www.cnblogs.com/dengnan/p/3990211.html 通过自己实际测试有以下几种方法 方法一通过a标签实现,把要导出的数据用“\n”和“,”拼接成一个字符串 ...

  5. yolo系列阅读笔记(v1-v3)

    yolov1 模型输出的概率建模 图片首先被分割为S*S的网格(grid cell).如果一个bbox的中心落在一个网格里,则该网格负责检测该物体.(对于pascal数据集,S定为7) 每个网格预测B ...

  6. 第一次个人编程作业&#183;寒假

    这个作业属于哪个课程 https://edu.cnblogs.com/campus/fzzcxy/SE/ 这个作业要求在哪里 https://edu.cnblogs.com/campus/fzzcxy ...

  7. mysql数据库-笔记

    基本概念篇 SQL语言的分类(DDL.DML.DCL.DQL) 对应的英文全程:data (definition.manipulation.control.query)language 参考资料: h ...

  8. 【Python】BMI指数 计算器

    身体质量指数 (Body Mass Index, 简称BMI), 亦称克托莱指数, 是目前国际上常用的衡量人体胖瘦程度以及是否健康的一个标准.BMI 值超标,意味着你必须减肥了. 在线版:https: ...

  9. Git的安装与使用详解

    git安装 下载安装git:采用默认配置安装即可 使用git --version确认是否安装成功,如下 GitHub使用: 配置sshkey,后续可以免密登录github cd / ssh-keyge ...

  10. js面向对象的程序设计 --- 下篇 继承启蒙

    继承是oo语言中一个最为人津津乐道的概念.ECMAScript支持实现继承,而且实现继承只要是靠原型链来实现的 ·原型链 其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法. 简单回顾一 ...