理解为什么在React类组件中super()被弃用

Question

我是React的新手，正在学习最新版本的React中的React组件生命周期。下面部分代码中我的"super"调用被标记为过时警告。我很难理解这个，因为很多文档仍然使用“super”，而且我甚至不确定它的后继者是什么，即使是从反馈中链接到的完整文章也是如此。有什么想法吗？谢谢。

class App extends Component {
  constructor(props) {
    super(props);
  }
}

这里是警告：

constructor React.Component<any, any, any>(props: any, context?: any): React:Component<any, any, any> (+1 overload)
@deprecated
@see - https://reactjs.org/docs/legacy-context.html
'(props: any, context?: any): Component<any, any, any>' is deprecated ts(6385)

- Steven

---

可能是React Native上下文和已弃用的super使用的重复问题？这里没有context，代码实际上很好，警告是错误的。 - Bergi

Answer 1

只有在构造函数中使用this.props时，才需要使用super(props);。否则，你可以使用super();。 如果你在构造函数中使用super();，在构造函数之外调用this.props不会有问题。 你可以在以下链接中了解更多： https://overreacted.io/why-do-we-write-super-props/

class Button extends React.Component {
  constructor(props) {
    super(); //we forgot to pass props
    console.log(props); //{}
    console.log(this.props); //undefined
  }
  // ...
}

如果这种情况发生在从构造函数调用的某个方法中，那么情况可能会更加具有挑战性。这就是为什么我建议总是传递 super(props)，即使并不必要。

class Button extends React.Component {
  constructor(props) {
    super(props); //we passed props
    console.log(props); //{}
    console.log(this.props); //{}
  }
  // ...
}

- Kiril Dobrev

---

解释了super()，但没有回答OP的问题。问题是为什么它被标记为弃用。 - Aus

我相信这是一种在回答撰写时未解决的错误。我找到了这个解决方案和解释，如果能帮助某人解决问题，我会分享它。我们可以在其他答案中找到更多细节。 - Kiril Dobrev

Answer 2

super(props);目前还没有被弃用。实际上，废弃消息是由于React类型定义文件中的错误引起的，已经在@types/react 16.9.51中修复。只需升级包即可。

npm install @types/react

- weeix

---

解决了我的问题，而其他答案没有解决。 - blissweb

它可以工作，我建议还要添加 --save-dev，这样它就会进入 devDependencies。 - Sergey Kirienko

Answer 3

看起来可选的上下文参数已经被弃用，因为它引用了 React 上古时期的上下文（v16.3 之前）。你正在使用哪个版本的 React？

https://reactjs.org/docs/legacy-context.html

我没有使用过带 TypeScript 的 React。也许 React 映射已经过时了。

- Dmitry S.

---

我正在使用React 16.13.1。让我困惑的是，我甚至没有使用那个可选参数。 - Steven

构造函数(props, context)的继任者会是什么？ - Steven

似乎我只需要调用super()而不是super(props)。我从这里得到了这个想法：https://dev59.com/K10a5IYBdhLWcg3wPGeQ - Steven

这应该没问题，除非你需要在构造函数内部使用 this.props。继承者在组件外部定义。https://reactjs.org/docs/context.html - Dmitry S.

React的文档建议使用super(props)，因此我认为你可以不做修改。这个弃用消息实际上是一个错误，有人已经提交了一个补丁来修复它。 - weeix

Answer 4

我认为这是jslint中的一个bug。很明显，代码没有使用上下文参数。

- McFrugal