Skip to content

constructor中super与props参数一起使用的目的是什么?

Posted on:2024年8月10日 at 17:04

在调用方法之前,子类构造函数无法使用this引用super()。

在ES6中,在子类的constructor中必须先调用super才能引用this。

在constructor中可以使用this.props

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        console.log(this.props);  // Prints { name: 'sudheer',age: 30 }
    }
}
class MyComponent extends React.Component {
    constructor(props) {
        super();
        console.log(this.props); // Prints undefined
        // But Props parameter is still available
        console.log(props); // Prints { name: 'sudheer',age: 30 }
    }

    render() {
        // No difference outside constructor
        console.log(this.props) // Prints { name: 'sudheer',age: 30 }
    }
}

上面的代码片段揭示了this.props行为仅在构造函数中有所不同。外部构造函数相同。

原文转自:https://fe.ecool.fun/topic/a67eec57-8dc1-40ee-9c8a-ccfbe25ca58d