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 一個引用類型，則返回這個引用類型。