zoukankan      html  css  js  c++  java
  • react的super(props)

    在学习react的时候,其中在构造函数里面,有一个super(props),具体是什么意思呢。

    其中 super语法来自es6,其语法如下:

    super([arguments]); 
    // 调用 父对象/父类 的构造函数
    
    super.functionOnParent([arguments]); 
    // 调用 父对象/父类 上的方法

    我们要理解react中的super(props),,就先看一下,es6的构造函数constructor

    看如下js

    		class Person{
    			constructor(props){
    				console.log("参数:"+props);
    				console.log("初始化 Person constructor");
    				this.name = "Person";
    			}
    		}
    
    		class Child extends Person{
    			getName(){
    				console.log("名字为:"+this.name);
    			}
    		}
    		
    		var child = new Child();
    		child.getName();
    

      在js中,类在 new 实例化的时候,系统会默认调用constructor函数,在 Child类中,我们没有定义构造函数,那个系统会默认有一个constructor,并且会在里面调用super();  当我们定义了构造函数之后,就使用我们定义的。所以我们自己定义的构造函数必须要调用super()对父类进行初始化。

    在react中,如果不需要在 constructor里面使用 props,是可以不用写 constructor的

     

     这个两种调用和不调用的区别,

    1、如果不需要 在 constructor里面使用 this.props ,是可以不用给super传props的

    2、如果不要在constructor写逻辑,仅仅是写一个super(props),实际上整个constructor都没有写的必要

    3、目前react支持一种新的写法,没有constructor情况下面的初始化数据,非常方便,这种写法,阮一峰老师的es6入门文档里面有提及,详细的自己去看

      

  • 相关阅读:
    简单的jQuery扩展函数-让函数缓冲执行
    Sharepoint更新字段触发工作流(无代码)
    jQuery Multi-TouchWipe / Multi-TouchZoom
    jQuery WipeTouch
    当页弹出对话框的实现
    SlidesJS的使用
    三级浮动菜单的实现
    UI中经常出现的下拉框下拉自动筛选效果的实现
    图片预加载,按需加载
    项目新的需求,网页的自适应交付/响应式交付 Responsive/Adaptive Delivery
  • 原文地址:https://www.cnblogs.com/muamaker/p/9621007.html
Copyright © 2011-2022 走看看