react中super()的理解

首先 super() 是在 es6的class（类）的方法创建组件出现

下面是分别是构造函数创建组件和class(类)创建组件

构造函数方法创建组件

在构造函数方法中，在组件接收参数的时候，props作为函数的形参，在 function 构造函数中不存在this的指向问题

function Hello(props) {
  const { userinfo } = props;
  return <p>组件和组件传值 ----------- {userinfo.name}</p>;
}

const userinfo = {
  name: "组件传递的数据",
  age: 18,
};

ReactDOM.render(
  <div>
    react组件和组件传值<Hello userinfo={userinfo}></Hello>
  </div>,
  document.getElementById("app")
);

 

es6 class(类) 方法创建组件

这里需要掌握原型链，对原型链不熟悉的先去看下js中对象的原型，前面随笔中也有两次讲到js原型

// 构造函数 会 默认生成 一个原型对象
function Person(name,) {
       this.name = name;
     }
     console.log(Person);                          // 构造函数本身
     console.log(Person.prototype）               // 指向原型对象
     console.log(Person.prototype.constructor);    // 指向 构造函数本身
     Person("范顺");

在class(类) 方法中，同理可得 constructor(props)，

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

所以super(props)的作用就是在父类的构造函数中给props赋值一个对象this.props=props这样就能在它的下面定义你要用到的属性了，然而其他的由于没有传参就直接赋值为undefind

 

class Hello extends React.Component {
  constructor(props) {
    super(props)         // 子类继承父类，this
    console.log(props)
  }
  render() {
    return null;
  }
}

 

拓展部分：理解 super( ) ——继承

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

    class People{
        constructor(name,age){
            this.name = name;
            this.age = age;
        }
        sayName(){
            return '我的名字是：'+this.name;
        }
    }

    class har extends People{
        constructor(name,age,sex){
            super(name,age);//调用父类的constructor(name,age)
            this.sex = sex;
        }
        haha(){
            return this.sex + ' ' + super.sayName();//调用父类的sayName() 
        }
    }

上面的例子中，出现了 super( )，子类 必须 在 constructor( )调用 super( )方法，否则新建实例时会报错。（不要问为什么！）

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

    class Ha{/*某些代码*/}

    class haha extends Ha{
        constructor(){}
    }

    let haha1 = new haha();ReferenceError报错

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

复习一个重要知识点——ES5中new到底做了些啥？
当一个构造函数前加上new的时候，背地里来做了四件事：
1.生成一个空的对象并将其作为 this；
2.将空对象的 __proto__ 指向构造函数的 prototype；
3.运行该构造函数；
4.如果构造函数没有 return 或者 return 一个返回 this 值是基本类型，则返回this；如果 return 一个引用类型，则返回这个引用类型。