什么时候传递道具给super()很重要,为什么?

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

当前回答

对于react 16.6.3版本,我们使用super(props)来初始化状态元素名称:this.props.name

constructor(props){
    super(props);        
}
state = {
  name:this.props.name 
    //otherwise not defined
};

其他回答

按照源代码

function ReactComponent(props, context) {
  this.props = props;
  this.context = context;
}

你每次有道具的时候都要传递道具,不要把道具放到这里。手动道具。

对于react 16.6.3版本,我们使用super(props)来初始化状态元素名称:this.props.name

constructor(props){
    super(props);        
}
state = {
  name:this.props.name 
    //otherwise not defined
};

这是我做的小提琴:jsfiddle.net。它表明默认情况下道具不是在构造函数中分配的。据我所知,它们是在方法React.createElement中分配的。因此,super(props)应该只在超类的构造函数手动将props赋给this.props时调用。如果你只是扩展React。组件调用super(props)不会对props做任何事情。也许它会在React的下一个版本中被改变。

只有一个原因需要将props传递给super():

当你想访问这个的时候。构造函数中的道具。

传递:

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

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

不通过:

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', … }
    }
}

注意,传递或不传递道具给super对以后的使用没有影响。构造函数外的道具。也就是说,渲染、shouldComponentUpdate或事件处理程序总是可以访问它。

这一点在Sophie Alpert对一个类似问题的回答中得到了明确的表达。


文档-状态和生命周期,向类添加本地状态,第2点建议:

类组件应该总是使用props调用基构造函数。

但是,没有提供理由。我们可以推测,这要么是因为子类化,要么是为了未来的兼容性。

(感谢@MattBrowne提供的链接)

Super()用于调用父构造函数。

Super (props)将把道具传递给父构造函数。

从你的例子中,super(props)会调用React。组件构造函数将props作为参数传入。

更多关于super的信息: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super