首先 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原型

1 // 建構函式 會 預設生成 一個原型物件
2 function Person(name,) {
3        this.name = name;
4
 
      }
5      console.log(Person);                          // 建構函式本身
6      console.log(Person.prototype）               // 指向原型物件
7      console.log(Person.prototype.constructor);    // 指向 建構函式本身
8      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關鍵字來實現的

 1     class People{
 2         constructor(name,age){
 3             this.name = name;
 4             this.age = age;
 5         }
 6         sayName(){
 7             return '我的名字是：'+this.name;
 8         }
 9     }
10 
11     class har extends People{
12         constructor(name,age,sex){
13             super(name,age);//呼叫父類的constructor(name,age)
14             this.sex = sex;
15         }
16         haha(){
17             return this.sex + ' ' + super.sayName();//呼叫父類的sayName() 
18         }
19     }

上面的例子中，出現了 super( )，子類 必須 在 constructor( )呼叫 super( )方法，否則新建例項時會報錯。（不要問為什麼！）

報錯的原因是：子類是沒有自己的 this 物件的，它只能繼承自父類的 this 物件，然後對其進行加工，而super( )就是將父類中的this物件繼承給子類的。沒有 super，子類就得不到 this 物件，沒有 this 物件而要對 this 進行處理，能不報錯嗎？

1     class Ha{/*某些程式碼*/}
2 
3     class haha extends Ha{
4         constructor(){}
5     }
6 
7     let haha1 = new haha();ReferenceError報錯

出現上面情況的總原因是，ES5的繼承機制與ES6完全不同。

複習一個重要知識點——ES5中new到底做了些啥？
當一個建構函式前加上new的時候，背地裡來做了四件事：
1.生成一個空的物件並將其作為 this；
2.將空物件的 __proto__ 指向建構函式的 prototype；
3.執行該建構函式；
4.如果建構函式沒有 return 或者 return 一個返回 this 值是基本型別，則返回this；如果 return 一個引用型別，則返回這個引用型別。