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

react中这两个API出镜率超级高,但是一直不太懂这到底是干嘛的,有什么用;今天整理一下,方便自己查看同时方便大家。

1.constructor( )-----super( )的基本含义

constructor( )——构造方法

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

super( ) ——继承

在class方法中,继承是使用 extends 关键字来实现的。子类 必须 在 constructor( )调用 super( )方法,否则新建实例时会报错。

报错的原因是:子类是没有自己的 this 对象的,它只能继承自父类的 this 对象,然后对其进行加工,而super( )就是将父类中的this对象继承给子类的。没有 super,子类就得不到 this 对象。

2.Es5-----Es6关于继承的实现不同之处

出现上面情况的原因是,ES5的继承机制与ES6完全不同。

复习一个重要知识点——ES5中new到底做了些啥?

当一个构造函数前加上new的时候,背地里来做了四件事:
1.生成一个空的对象并将其作为 this;
2.将空对象的 __proto__ 指向构造函数的 prototype
3.运行该构造函数;
4.如果构造函数没有 return 或者 return 一个返回 this 值是基本类型,则返回this;如果 return 一个引用类型,则返回这个引用类型。

简单解释,就是在ES5的继承中,先创建子类的实例对象this,然后再将父类的方法添加到this上( Parent.apply(this) )。而ES6采用的是先创建父类的实例this(故要先调用 super( )方法),完后再用子类的构造函数修改this。

3.super(props)------super()-----以及不写super的区别

如果你用到了constructor就必须写super(),是用来初始化this的,可以绑定事件到this上;

如果你在constructor中要使用this.props,就必须给super加参数:super(props);

(无论有没有constructor,在render中this.props都是可以使用的,这是React自动附带的;)

如果没用到constructor,是可以不写的;React会默认添加一个空的constructor。

原文地址:https://www.cnblogs.com/08291018wan/p/9536873.html

时间: 2024-11-05 22:01:09

react中constructor和super()以及super(props)的区别。的相关文章

React中constructor(props){}究竟是什么,以及super(props)与super()

定义class组件,为什么需要加上 super() ? 我们尝试去掉 super() 看看编译的结果: constructor() { this.state = {searchStr: ''}; this.handleChange = this.handleChange.bind(this); } 编译错误: 提示没有在this之前加上super() 其实就是少了super(),导致了this的 Reference Error class MyComponent extends React.Co

react中constructor和super的使用

一:什么时候要用constructor,需要定义state的时候必须要写,要调用super(),而且要传入props参数即super(props).如果不定义state的话,有无constructor没区别. 二:什么时候要调用super,如果要在子类中使用父类的属性和方法,就要调用super(父类接受的参数),即要在constructor中使用this.props的时候就必须要调用super(props). 例如: constructor(){ super(); //没有用到this.prop

React中state和props分别是什么?

[转]https://segmentfault.com/a/1190000011184076 整理一下React中关于state和props的知识点. 在任何应用中,数据都是必不可少的.我们需要直接的改变页面上一块的区域来使得视图的刷新,或者间接地改变其他地方的数据.React的数据是自顶向下单向流动的,即从父组件到子组件中,组件的数据存储在props和state中,这两个属性有啥子区别呢? props React的核心思想就是组件化思想,页面会被切分成一些独立的.可复用的组件. 组件从概念上看

React中的State与Props

一.State 1.什么是 state 一个组件的显示形态可以由数据状态和外部参数决定,其中,数据状态为 state,外部参数为 props 2.state 的使用 组件初始化时,通过 this.state 给组件设置一个初始的 state,在第一次 render 时就会用这个数据渲染组件 class ItemList extends React.Component { constructor() { super(); this.state = { data: '123' }; } render

关于Java中this和super的用法介绍和区别

1.this&super 什么是this,this是自身的一个对象,代表对象本身,可以理解为:指向对象本身的一个指针.当你想要引用当前对象的某种东西,比如当前对象的某个方法,或当前对象的某个成员,你便可以利用this来实现这个目的.要注意的是this只能在类中的非静态方法中使用,静态方法和静态的代码块中绝对不能出现this.his也可作为构造函数来使用.在后面可以看到 而什么是super,可以理解为是指向自己超(父)类对象的一个指针,而这个超类指的是离自己最近的一个父类.super的作用同样是可

为什么静态成员、静态方法中不能用this和super关键字

1.      在静态方法中是不能使用this预定义对象引用的,即使其后边所操作的也是静态成员也不行.因为this代表的是调用这个函数的对象的引用,而静态方法是属于类的,不属于对象,静态方法成功加载后,对象还不一定存在 2.      在问题之前先讲super的用法:1.super的用法跟this类似,this代表对本类对象的引用,指向本类已经创建的对象:而super代表对父类对象的引用,指向父类对象:2.静态优先于对象存在:3.由上面的1.和2.知:因为静态优先于对象存在,所以方法被静态修饰之

React中的state与props的再理解

props可以看做是 property 的缩写的复数,可以翻译为属性,类似于HTML 标签的自定义属性.在大多数React教程里讲 state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变.其实这种说法有问题.可以参考一篇文章<React中state与props介绍与比较> 组件中的props本质作用是一种父级向子级传递数据的方式.props是可以改变的,只是没有提供API可以在子组件里直接修改,我们可以在父组件里把要给子组件的属性值修改.

Java中的两个关键字——super、this

Java中的两个关键字——super.this 一.super super 是java中方的一个关键字,用它可以引用父类中的成员: super可用于访问父类中定义的属性 super可用于调用父类中定义的成员方法 super可用于在子类构造器中调用父类的构造器 使用super关键字注意事项: 1.当子类和父类都有同名的属性时,在子类中如果要使用父类的属性 super . 属性 2. super只能应用在成员方法和构造方法中,不能用在静态方法中(和this是一样的) 3.如果在构造方法中使用必须放在

React中Props 和 State用法

React中Props 和 State用法 1.本质 一句话概括,props 是组件对外的接口,state 是组件对内的接口.组件内可以引用其他组件,组件之间的引用形成了一个树状结构(组件树),如果下层组件需要使用上层组件的数据或方法,上层组件就可以通过下层组件的props属性进行传递,因此props是组件对外的接口.组件除了使用上层组件传递的数据外,自身也可能需要维护管理数据,这就是组件对内的接口state.根据对外接口props 和对内接口state,组件计算出对应界面的UI=>UI = C