React -- react中关于构造函数中super(props)的问题

约定不等于承诺〃 2022-04-05 05:00 287阅读 0赞

用react开发有一段时间了，有一个疑惑，为什么构造函数中需要写super(props)？

第一种情况，假如我们不写会怎么样？

import React, { Component } from "react";
    
    class Text extends Component {
    
        constructor (props) {
        //    super( );
           console.log(props)
           console.log( this.props) ;
        }
       
        render (){
            return null;
        }
    }
    
    export default Text

我们运行代码，会发现报错了。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70][]

Js引擎强制你在调用父类构造函数之前，不允许使用this.这是有很好的理由的。

比如：你需要使用父类里面的属性或者方法时，这种时候是访问不到的。

2：如果我们写了。但是不传递参数，写成super(),会怎样？

import React, { Component } from "react";
    
    class Text extends Component {
    
        constructor (props) {
           super( );
           console.log(props)
           console.log( this.props) ;
        }
       
        render (){
            return null;
        }
    }
    
    export default Text

结果·如下：

![20181210224903460.png][]

因为你没有传递props给父类构造函数，所以你在**构造函数里面**

无法访问this,props,但是你在构造函数外面依然可以！！！

import React, { Component } from "react";
    
    class Text extends Component {
    
        constructor (props) {
           super( );
           console.log(props)
           console.log( this.props) ;
        }
        componentDidMount () {
            console.log(this.props);
        }
        render (){
            return null;
        }
    }
    
    export default Text

![20181210225211405.png][]

React内部，在构造函数之后，马上又实例了一遍props,因此，即便你忘记了传入props给super，但是React依然在事后会设置它

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70]: /images/20220405/6ee0b33e9b5945dba1befbcd23c1377c.png
[20181210224903460.png]: /images/20220405/028e9f4ff8b344dba8afc608ecc5f94f.png
[20181210225211405.png]: /images/20220405/0d52b57c91374d62a5eb1336f3a8044f.png