super(props) 的奥秘：揭秘 React Class 组件的本质

2023-12-14 00:40:31

深入探索 super(props) 在 Class 组件中的关键作用

super(props) 在继承中的作用

在 React 中，我们可以通过 extends 继承 Class 组件。当我们创建子组件时，super(props) 函数调用必不可少。它将父组件的属性传递给子组件，使子组件能够访问父组件的方法。

class Parent extends React.Component {
  render() {
    return (
      <div>
        <h1>Parent Component</h1>
        <Child />
      </div>
    );
  }
}

class Child extends React.Component {
  render() {
    return (
      <div>
        <h1>Child Component</h1>
        <p>Props from Parent: {this.props.message}</p>
      </div>
    );
  }
}

在上面的示例中，Child 组件继承了 Parent 组件。如果没有 super(props) 调用，Child 组件将无法访问从 Parent 组件传递的 message 属性。

super(props) 在组件生命周期中的作用

React 的 Class 组件具有多个生命周期方法，例如 componentDidMount、componentDidUpdate 和 componentWillUnmount。这些方法会在组件的生命周期特定阶段被调用。

在生命周期方法中使用 super(props) 很重要，因为它允许我们调用父组件的生命周期方法。

class Parent extends React.Component {
  componentDidMount() {
    console.log("Parent component mounted");
  }

  componentDidUpdate() {
    console.log("Parent component updated");
  }

  componentWillUnmount() {
    console.log("Parent component unmounted");
  }

  render() {
    return (
      <div>
        <h1>Parent Component</h1>
        <Child />
      </div>
    );
  }
}

class Child extends React.Component {
  componentDidMount() {
    super(props);
    console.log("Child component mounted");
  }

  componentDidUpdate() {
    super(props);
    console.log("Child component updated");
  }

  componentWillUnmount() {
    super(props);
    console.log("Child component unmounted");
  }

  render() {
    return (
      <div>
        <h1>Child Component</h1>
        <p>Props from Parent: {this.props.message}</p>
      </div>
    );
  }
}