react_constructor()、super()、super(props)

2019-11-11

字数统计: 373字 | 阅读时长≈ 1分

使用es6的class定义react组件时，经常会看到下面的代码：

constructor(props) {
  super(props);
  ...
}

通常会有两个疑问：

先说结论：

只要存在constructor就要调用super()

但是，不是每个react组件都需要constructor，比如下面的代码是可以正常运行的：

class App extends React.Component {
  render() {
    return (
      <h1>{this.props.text}</h1>
    );
  }
}

很多时候需要在constructor中访问this：

1
2
3

constructor() {
  console.log(this); --- Syntax error: 'this' is not allowed before super()
}

这是因为当没有调用super()时，this还没有被初始化，所以不能使用；那如果我不使用this呢？

1
2
3

constructor() {
--- Syntax error: missing super() call in constructor
}

es6会在语法层面强制你调用super()，所以得到的结论就是：只要存在constructor就必须调用super()

第一个问题已经回答了什么时候调用super()，那什么时候必须要调用super(props)呢？先说结论：

当需要在constructor中访问this.props的情况下

从上面的代码可以看出，即使没有constructor，依然可以在render中使用this.props，这是因为react在初始化class后，会将props自动设置到this中，所以在任何地方都可以直接访问this.props，除了一个地方：constructor

constructor(props) {
  super();
  console.log(this.props); --- undefined
}

所以当你需要在constructor中访问this.props时，才需要设置super(props)