reactjs - 使用 es6 类时，React 中的 "super()"和 "super(props)"有什么区别？

Question

什么时候将 props 传递给 super() 很重要，为什么？

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

Answer 1

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

当你想在构造函数中访问this.props时。

通过:

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

请注意，将 props 传递或不传递给 super 对以后使用 this.props 没有影响外部构造函数。也就是说，render、shouldComponentUpdate 或事件处理程序始终可以访问它。

Sophie Alpert 的一篇文章 answer 中明确指出了这一点类似的问题。

<小时/>

文档—State and Lifecycle, Adding Local State to a Class, point 2 ——推荐:

Class components should always call the base constructor with props.

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

(感谢@MattBrowne 提供的链接)