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

Question

我是 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)

Answer 1

似乎不推荐使用可选的上下文参数，因为它指的是遗留的 React 上下文（v16.3 之前）。您使用的是什么版本的 React？

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

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

Answer 2

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

Answer 3

只有在构造函数中使用 this.props 时才需要 super(props);。否则你可以使用 super(); 如果您在构造函数中使用 super();，则在构造函数之外调用 this.props 不是问题。您可以在以下 link 中阅读相关信息： 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); //{}
  }
  // ...
}

Answer 4

super(props); 尚未弃用。弃用消息实际上是由 a bug in React's type definition file 引起的，并且已从 @types/react 16.9.51 开始修复。只需升级软件包即可：

npm install @types/react

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

Understanding why super() is deprecated in a React class component

deprecated

typescript

reactjs