react super理解-白红宇

react super理解

阅读量：4102 次

发布时间：2019-05-25

本文共 1162 字，大约阅读时间需要 3 分钟。

最近在看react的文档，发现react的逻辑都是以component为基础的。

比如：

class Clock extends React.Component {
       constructor(props){
           super(props);        console.log(this);    }    }

在es6中class的继承是通过extends关键字实现的。constructor 是类默认的构造方法。那么super是做什么用的？

我们现在注释掉super(props)

class Clock extends React.Component {
       constructor(props){
           //super(props);        console.log(this);    }    }

提示图片

提示this不存在，就是说super是子类为了继承父类的this。

子类是没有自己的this的，它只能继承父类的this对象，然后对其操作。而super就是将父类的this继承给子类的。没有super，子类是无法拿到this对象的。

所以我们这样写 super()

class Clock extends React.Component {
       constructor(props){
           super();        console.log(this);    }    }

打印出this为：

现在我们打印下 this.props

class Clock extends React.Component {
       constructor(props){
           super(props);        console.log(this.props);    }    }

this.props

现在是可以正常打印出结果的，现在将super中的props删掉

class Clock extends React.Component {
       constructor(props){
           super();        console.log(this.props);    }    }

也就是说，如果我们想在constructor中使用props，super中就必须要带参数。否则是无法拿到值的。

所以还是建议，不论constructor中是否用到props ，都这样写super(props); 这样不论什么情况都不会有拿不到值或者报错的情况

先写到这吧，要是有别的认知再来补充??~~~

转载地址：http://lizsi.baihongyu.com/

你可能感兴趣的文章