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

IT技术 reactjs typescript deprecated
2021-04-17 13:15:22

我是 React 的新手,我正在使用最新版本的 React 学习 React 组件生命周期。我对下面部分代码的“超级”调用标有已弃用的警告。我很难理解这个,因为那里的很多文档仍然使用“超级”,而且我不确定继任者是什么,即使从反馈中链接的完整文章也是如此。有任何想法吗?谢谢。

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)
4个回答

super(props);只有this.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
  }
  // ...
}

如果这种情况发生在从构造函数调用的某些方法中,则可能更具挑战性。这就是为什么我建议总是传递 down super(props),即使通过它是没有必要的。

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

super(props);尚未弃用。弃用消息实际上是由React 的类型定义文件中的错误引起的,并且已经在@types/react 16.9.51 中修复只需升级软件包即可:

npm install @types/react
为我解决了它,而其他人的答案没有
2021-06-05 13:15:22

似乎不推荐使用可选的上下文参数,因为它指的是旧版 React 上下文(v16.3 之前)。你使用的是什么版本的 React?

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

我没有将 React 与 TypeScript 一起使用。也许 React 映射已经过时了。

看起来我可以只调用 super() 而不是 super(props)。我从这里得到了这个想法:stackoverflow.com/questions/30571875/...
2021-05-25 13:15:22
@Steven React' docs推荐使用,super(props)所以我认为你可以保持原样。弃用消息实际上是一个错误,有人已经提交了一个补丁来修复它。
2021-05-30 13:15:22
我正在使用 React 16.13.1。让我感到困惑的是,我什至没有使用该可选参数。
2021-06-09 13:15:22
构造函数(道具,上下文)的后继者是什么?
2021-06-12 13:15:22
除非您需要this.props在构造函数中使用,否则应该没问题后继是在组件外部定义的。reactjs.org/docs/context.html
2021-06-20 13:15:22

我认为这是 jslint 中的一个错误。代码显然没有使用上下文参数。