对象中multipartfile 空报错_React中super(props)和super()以及不写super()的及ES6和ES5的区别...

你好!

一.constructor()和super()的基本含义

206c6b65485694c7a865be4be3be69b7.png

现在时钟每秒都会刷新。

让我们来快速概括一下发生了什么和这些方法的调用顺序:

当 &lt Clock / >被传给 ReactDOM.render()的时候,React 会调用 Clock 组件的构造函数。因为 Clock 需要显示当前的时间,所以它会用一个包含当前时间的对象来初始化 this.state。我们会在之后更新 state。

之后 React 会调用组件的 render() 方法。这就是 React 确定该在页面上展示什么的方式。然后 React 更新 DOM 来匹配 Clock 渲染的输出。

当 Clock 的输出被插入到 DOM 中后,React 就会调用 ComponentDidMount() 生命周期方法。在这个方法中,Clock 组件向浏览器请求设置一个计时器来每秒调用一次组件的 tick() 方法。

浏览器每秒都会调用一次 tick() 方法。 在这方法之中,Clock 组件会通过调用 setState() 来计划进行一次 UI 更新。得益于 setState() 的调用,React 能够知道 state 已经改变了,然后会重新调用 render() 方法来确定页面上该显示什么。这一次,render() 方法中的 this.state.date 就不一样了,如此以来就会渲染输出更新过的时间。React 也会相应的更新 DOM。

一旦 Clock 组件从 DOM 中被移除,React 就会调用 componentWillUnmount() 生命周期方法,这样计时器就停止了。

constructor() —— 构造方法

这是ES6对类的默认方法,通过new命令生成对象实例自动调用的方法。

并且,该方法是类中必须要有的,如果没有显示定义,则会默认添加空的constructor()方法。

super() —— 继承

在class方法中,继承是使用extends关键字来实现继承的。

子类必须在constructor()中调用super()方法,否则新建实例时会报错。

报错的原因是,子类是没有自己的this对象的,它只能继承父类的this对象,

然后对其进行加工,而super()就是将父类中的this对象继承给子类的。

没有super,子类就得不到this对象。

二:ES5和ES6关于继承的实现不同之处

在ES5中,当一个构造函数前面加上new的时候,其实一共做了四件事:

1.生成一个空的对象并将其作为this

2.将空对象的__proto__指向构造函数的prototype

3.运行该构造函数

4.如果构造函数没有return或者return一个返回this值是基本类型,则返回this,如果return一个引用类型,则返回这个引用类型

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

三:super(props) —— super() —— 以及不写super()的区别

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

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

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

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

总结

子类继承父类的属性:需要使用super()继续父类的属性,同时创建this(子类本身没有this);

如果像上图一样需要定义props的属性 this.props.name="哈哈",则需要用 super(props)

如果不定义props的属性,只定义状态this.state ,就可以直接super();

这是为什么呢?

其实很简单,因为this.props必须要是一个对象,才能在它下面定义属性

而constructor(props){}传入的参数props为对象

所以super(props)的作用就是在父类的构造函数中给props赋值一个对象

this.props=props这样就能在它的下面定义你要用到的属性了,

然而其他的由于没有传参就直接赋值为undefind

由于state下面没有属性,所以如果只是定义state就可以直接super()就行了

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值