【React 面经】super() 和 super(props) 有什么区别

在 React 面试中，理解类组件中的 super() 和 super(props) 的区别是非常重要的，尤其是当你在处理继承和父子组件关系时。虽然这两个语句看起来相似，但它们的使用场景和作用却有所不同。本文将详细讲解 super() 和 super(props) 的区别，并结合常见的面试考察点进行说明。

一、super() 和 super(props) 的基础概念

1. 什么是 super()？

super() 是 JavaScript 中用于调用父类构造函数的关键字。在 React 中，super() 通常用于在类组件的构造函数中调用父类（React.Component）的构造函数。这样做是为了确保继承自 React.Component 的类能够正确地初始化父类的内部状态和方法。

当你在 React 类组件中继承自 React.Component 时，必须在构造函数中调用 super()，否则你将无法访问 this。

面试中可能考察点及回答：

• 为什么要使用 super()？：super() 用于调用父类构造函数，它是 JavaScript 类继承的基本要求。在 React 中，super() 使得当前类可以继承 React.Component 的方法和属性。
• 如果忘记调用 super()，会发生什么？：如果在构造函数中没有调用 super()，你将无法访问 this，这会导致错误。例如，TypeError: Cannot read property 'state' of undefined。

2. 什么是 super(props)？

super(props) 的作用与 super() 相似，都是调用父类构造函数，但它将 props 作为参数传递给父类的构造函数。这是 React 类组件中初始化父类的一个关键步骤，确保父类能够正确处理传入的 props。

在 React 中，React.Component 构造函数接收 props 作为参数，因此必须将 props 传递给 super(props)，以便父类能够正确地初始化 props。

面试中可能考察点及回答：

• super(props) 为什么需要传递 props？：props 是父组件传递给子组件的数据，React 会通过构造函数将它们传递给子组件，以便子组件能够正确地接收和使用这些数据。
• 没有传递 props 会怎样？：如果没有传递 props，子组件的 this.props 将是 undefined，这会导致组件无法正确接收父组件传递的属性。

二、super() 和 super(props) 的区别

1. super() 的使用

super() 仅调用父类的构造函数，并不会传递任何参数。在 React 中，super() 主要用来继承父类的方法和初始化父类的内部状态，但它并没有传递 props 给父类，因此子组件无法通过 this.props 访问到父组件传递的属性。

2. super(props) 的使用

super(props) 不仅调用父类的构造函数，还将 props 作为参数传递给父类构造函数。这是 React 类组件中的标准做法，因为父类 React.Component 的构造函数需要接收 props，并在子类中将它们赋值给 this.props。这样，子组件就能正常访问 props，并在组件中使用它们。

面试中可能考察点及回答：

• 什么时候使用 super()？什么时候使用 super(props)？：在构造函数中，通常需要使用 super(props)，因为 React 的 Component 类的构造函数需要接收 props 参数。如果你的组件没有接收 props，或者父类没有需要 props 的情况，可以使用 super()。
• super() 和 super(props) 哪个更常用？：在 React 中，super(props) 是更常见的写法，因为几乎所有的类组件都需要访问 props。

3. 具体例子

示例 1：使用 super()

如果你的组件不需要访问 props，例如只处理内部状态的情况，可以使用 super()：

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor() {
    super();  // 只调用父类构造函数
    this.state = { count: 0 };
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

export default MyComponent;

在这个例子中，super() 仅调用父类的构造函数，因为组件没有使用 props。

示例 2：使用 super(props)

如果组件需要访问 props，比如通过父组件传递初始化的参数或数据，就需要使用 super(props)：

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);  // 调用父类构造函数并传递props
    this.state = { count: this.props.initialCount };
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

export default MyComponent;

在这个例子中，super(props) 将父组件传递的 props 传递给父类构造函数，并确保 this.props 可以在子组件中访问。

三、React 中的类组件构造函数总结

1. super(props) 是必须的吗？

如果你在类组件的构造函数中使用了 this，你必须首先调用 super() 或 super(props)，否则 this 会是 undefined，导致错误。而在大多数 React 类组件中，都需要通过 props 初始化子组件，所以 super(props) 是常见的写法。

2. 为什么需要 super(props)？

React 组件通过 props 接收数据，React.Component 的构造函数需要接收 props。如果没有使用 super(props)，props 就无法正确传递给父类构造函数，从而导致子组件无法访问 props。

3. 何时选择不传递 props？

在极少数情况下，如果组件不需要使用 props，你可以选择不传递它。此时，super() 足够调用父类构造函数。

推荐：

• JavaScript
• react
• vue