简述super()和super(props)有什么区别？

参考回答

super() 和 super(props) 都是在 React 中的类组件中调用父类构造函数的方式，但它们在调用时有一些细微的区别：

• super()：不传递任何参数，直接调用父类的构造函数。在 ES6 中，如果你在子类的构造函数中使用了 super()，它会调用父类的构造函数并且没有传递任何参数。

• super(props)：通常在 React 组件的构造函数中使用，传递父类构造函数的 props 参数。React 要求在子类的构造函数中使用 super(props)，以便正确地将父类的 props 初始化到子类中，这样子类组件才能访问 this.props。

详细讲解与拓展

1. super() 和 super(props) 的工作原理

• 在 JavaScript 中，super 是用于访问父类构造函数和方法的关键字。通常情况下，我们在子类的构造函数中需要调用 super() 来初始化父类的部分内容。
• 如果你在子类构造函数中没有使用 super(props)，而直接使用 super()，那么 this 对象在构造函数中将不可用，原因是 JavaScript 的类继承要求在访问 this 之前必须先调用 super()。

2. 区别

• super()：如果没有传递任何参数，它仅仅是调用父类的构造函数，并且不将 props 传递给父类。在 React 中，这种做法是不推荐的，因为你将无法正确访问 this.props。

• super(props)：这将会调用父类构造函数，并且把 props 传递给它。这样子类的实例就能正确初始化 this.props，并可以在组件中访问 props。

  举例：

  class Parent {
   constructor(name) {
     this.name = name;
   }
  }
  
  class Child extends Parent {
   constructor(props) {
     super(props);  // 将 props 传递给父类构造函数
     this.state = { value: 'test' };
   }
  }
  

  JavaScript

  Copy

  这里，super(props) 将 props 传递给了 Parent 类的构造函数，确保 Child 组件能够正确访问和初始化 this.props。

3. 为什么要使用 super(props)？

在 React 中，super(props) 是必须的，因为它确保了父类（React.Component）能够正确地初始化 this.props。如果没有调用 super(props)，你将无法访问 this.props，这会导致错误。

举例：

“`javascript
class MyComponent extends React.Component {
constructor(props) {
super(props); // 必须使用 super(props)，确保 this.props 可用
console.log(this.props); // 如果没有 super(props)，此处会报错
}

<pre><code> render() {
return <div>{this.props.name}</div>;
}
</code></pre>

}

“`

在上面的代码中，super(props) 确保了父类 React.Component 构造函数初始化了 this.props，使得子类组件能够正确访问和使用 this.props。

4. 没有 super(props) 会发生什么？

• 如果你在 React 组件的构造函数中没有调用 super(props)，你会遇到以下错误：
  • this 未定义：你无法访问 this.props，也无法在构造函数中使用 this。这是因为在子类构造函数中，访问 this 前必须调用 super()。
  • this.props 不可用：React 无法在没有调用 super(props) 的情况下正确初始化 this.props。

  举例：

  class MyComponent extends React.Component {
   constructor() {
     super();  // 这里没有传递 props
     console.log(this.props);  // 这里会抛出错误
   }
  
   render() {
     return <div>{this.props.name}</div>;
   }
  }
  

  JavaScript

  Copy

  这段代码会抛出错误，因为 super() 被调用时没有传递 props，导致无法正确初始化 this.props。

总结

• super()：在子类构造函数中调用父类构造函数，但不传递 props。在 React 中不推荐使用这种方式，因为它会导致无法访问 this.props。
• super(props)：正确地调用父类构造函数，并将 props 传递给父类，确保 this.props 在 React 组件中可用。这个方式是 React 中推荐的做法。

帅地永久会员

打赏 收藏 海报挣佣金 推广链接