super() OR super(props) -- What's The Difference

Questions:
When is it important to pass props to super(), and why ?

class MyComponent extends React.Component {
  constructor(props) {
    super(); // or super(props) ?
  }
}

Answer :

There is only one reason when one needs to pass props to super() :

When you want to access this.props in constructor.

Passing:

class MyComponent extends React.Component {    
    constructor(props) {
        super(props)

        console.log(this.props)
        // -> { icon: 'home', … }
    }
}

Not passing:

class MyComponent extends React.Component {    
    constructor(props) {
        super()

        console.log(this.props)
        // -> undefined

        // Props parameter is still available
        console.log(props)
        // -> { icon: 'home', … }
    }

    render() {
        // No difference outside constructor
        console.log(this.props)
        // -> { icon: 'home', … }
    }
}

Note that passing or not passing props to super has no effect on later uses of this.props outside constructor. That is render, shouldComponentUpdate, or event handlers alwayshave access to it.

Ben Alpert from React team:
If you want to use this.props in the constructor, you need to pass props to super. Otherwise, it doesn't matter because React sets .props on the instance from the outside immediately after calling the constructor.

猜你喜欢

转载自blog.csdn.net/tangxiaolang101/article/details/77190692
今日推荐