小编典典

使用 es6 类时,React 中的“super()”和“super(props)”有什么区别?

all

什么时候传球很重要propssuper()为什么?

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

阅读 97

收藏
2022-03-04

共1个答案

小编典典

只有一个原因需要传递propssuper()

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

请注意,传递或不传递propstosuper对之后的使用外部没有影响。也就是说,、 或事件处理程序始终可以访问它。this.props``constructor``render``shouldComponentUpdate

这在 Sophie Alpert对类似问题的回答中明确表示。


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

类组件应始终使用props.

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

2022-03-04