zoukankan      html  css  js  c++  java
  • 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原型

    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 一个引用类型,则返回这个引用类型。



  • 相关阅读:
    ArcGIS安装中模块不能注册问题的解决办法
    BW一些关于DTP的一些链接
    HR一个奖金模拟试算的程序,仅供参考
    SD关于SD的业务的锁定的几个tCODE
    ABAP如何在abap中使用日志管理
    HR一个员工的所有主数据(PA*)克隆到一个新员工的程序代码
    LSMW--一个中文介绍的摘抄
    MM物料重新过账的代码摘抄
    ABAP如何创建和使用sap的号码范围对象
    BDC Program to Upload Material Master Data (MM01)
  • 原文地址:https://www.cnblogs.com/shun1015/p/13496694.html
Copyright © 2011-2022 走看看