【掰开揉碎】react中的super(props)

在React中，super(props)是在类组件的构造函数中调用super关键字的一部分，用于调用父类的构造函数，同时也会将props传递给父类的构造函数。让我们详细解释一下这个用法。

1. 构造函数和super

在React中，当你创建一个类组件时，你通常会定义一个构造函数，用于初始化组件的状态和其他相关的设置。在构造函数中，需要调用super(props)，这是因为在JavaScript中，子类在构造函数中必须调用super，以便继承父类的属性和方法。

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props); // 调用父类的构造函数并传递props
    // 在这里进行组件的初始化工作
  }

  // 其他组件逻辑
}

2. 为什么使用super(props)

在React组件中，super(props)的目的是将props传递给父类的构造函数。在React的类组件中，props是组件的属性，用于传递数据到组件。

// 父组件
class ParentComponent extends React.Component {
  render() {
    return <ChildComponent name="John" />;
  }
}

// 子组件
class ChildComponent extends React.Component {
  constructor(props) {
    super(props); // 将props传递给父类构造函数
    console.log(props.name); // 输出 "John"
  }

  render() {
    // 渲染组件
  }
}

通过调用super(props)，子类就能够在构造函数中访问this.props，并正确继承父类的行为。

3. ES6类继承

在ES6中，我们使用class关键字来定义类。在子类的构造函数中，如果存在super，那么必须在子类的构造函数中首先调用super。这是因为子类需要继承父类的构造函数，并确保正确设置this。

class Animal {
  constructor(name) {
    this.name = name;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // 调用父类的构造函数并传递name
    this.breed = breed;
  }
}

const myDog = new Dog('Buddy', 'Golden Retriever');
console.log(myDog.name); // 输出 "Buddy"
console.log(myDog.breed); // 输出 "Golden Retriever"

在React组件中，super(props)的使用与上述示例类似，只不过props是React组件的一部分，用于传递数据和属性。

总之，super(props)在React类组件的构造函数中是必不可少的，用于正确初始化组件并继承父类的构造函数行为。