React 中的构造函数(props) 和 super(props) VS 构造函数() 和 super()

Posted 2023-02-21

【中文标题】React 中的构造函数(props) 和 super(props) VS 构造函数() 和 super()

【英文标题】：Constructor(props) and super(props) VS constructor() and super() in React

【发布时间】：2018-05-06 16:30:13

【问题描述】：

我知道这个问题被问了很多次，但仍然不清楚。 刚才很多人说：

如果你想在那里访问this.props，请将 props 传递给构造函数

one more example of the answer

官方文档说 Class components should always call the base constructor with props. ，但如果我们不将 props 传递给 constructor，我们仍然会在除构造函数之外的任何地方都有 this.props。

同样从react source code我们可以看到 React.Component 的源代码 function ReactComponent(props, context) this.props = props; this.context = context;

但这让我更加困惑。 super() 应该使用两个参数调用：props 和 context。但是我们调用了我们的 super empty 并且仍然可以访问两个this.props。 根据 ECMA 文档 super() 调用父 constructor() 并将参数传递给 super() 。但是我们的super() 是空的。

所以我的问题是：

为什么官方文档说：

类组件应始终使用 props 调用基本构造函数。

如果super() 和constructor() 为空，React 如何将props 设置为子组件？ 是不是 React 特性的 bug，在子组件中可以访问 props 而无需将 props 传递给 super() 和 constructor()？

【问题讨论】：

妥协：constructor(...args) super(...args);

你为什么要查看这些过时的源代码？

github.com/facebook/react/blob/master/packages/react/src/…: createElement 添加props，无论您是否使用super(props)。

@Li357 感谢新源代码的链接。那么当前的 React 文档是错误的还是什么？不需要总是用props 打电话给constructor 吗？

抱歉，有人知道答案吗？

【参考方案1】：

这是 Dan Abramov 的回答：

但如果我们不将props 传递给constructor，我们仍然会有 this.props 除了constructor 之外的所有地方。

是的，在 constructor 运行之后，React 无论如何都会设置 this.props。尽管如此，让this.props 在某些地方工作而不是在其他地方工作仍然令人困惑。特别是如果constructor 和其他方法都调用了某个读取this.props 的共享方法。因此，为避免任何潜在的混淆，我们建议您始终致电super(props)。

同样从Create Element的源代码你可以看到createElement 无论您是否使用super(props)

，都会添加道具

createElement() 与此问题无关。它创建一个元素，而不是一个实例。

所以，回到您的问题，从技术上讲，仅当您计划在constructor 或您从constructor 调用的任何方法中访问this.props 时才有必要。然而，必须记住这一点非常令人困惑。您可能知道这件事而不打电话给super(props)，但是您团队中的下一个人会想要在constructor 中访问this.props，并且会惊讶它不起作用。总是指定它以避免这些问题更容易。

【参考方案2】：

如果代码中没有为 react 组件定义构造函数，你可以假设它会在后台自动绑定，例如：

constructor(props)
    super(props);

一旦你明确定义了一个构造函数，你必须记住总是把那个代码放进去，否则它会被遗漏......你基本上只是覆盖了一个默认方法:)