ReactJSでsuper()とsuper(props)を使いこなして、コンポーネント開発をレベルアップ！

2024-04-02

ReactJSにおける super() と super(props) の違い

super() は、親クラスのコンストラクタを呼び出すためのものです。親クラスのコンストラクタは、子クラスのコンストラクタよりも先に実行されます。

親クラスからプロパティやメソッドを継承する場合
親クラスのコンストラクタで初期化処理を行う場合

などに super() を呼び出す必要があります。

super(props) は、親クラスのコンストラクタに props を渡すためのものです。props は、子コンポーネントに親コンポーネントから渡されるデータです。

親コンポーネントから渡された props を子コンポーネント内で使用する必要がある場合

具体的な例

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  render() {
    return (
      <div>
        <h1>親コンポーネント</h1>
        <p>カウント: {this.state.count}</p>
        <ChildComponent count={this.state.count} />
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  constructor(props) {
    // 親クラスのコンストラクタを呼び出す
    super(props);

    // 親コンポーネントから渡された props を受け取る
    this.props = props;
  }

  render() {
    return (
      <div>
        <h2>子コンポーネント</h2>
        <p>受け取ったカウント: {this.props.count}</p>
      </div>
    );
  }
}

この例では、親コンポーネント ParentComponent は count というプロパティを子コンポーネント ChildComponent に渡しています。

ChildComponent のコンストラクタでは、super() を呼び出すことで親クラスのコンストラクタを実行しています。
さらに、super(props) を呼び出すことで、親コンポーネントから渡された props を受け取っています。

このように、super() と super(props) を使い分けることで、親クラスと子クラスの間でデータや処理を正しく受け渡すことができます。

まとめ

super() は親クラスのコンストラクタを呼び出す
super(props) は親クラスのコンストラクタに props を渡す
親クラスからプロパティやメソッドを継承する場合、または親コンポーネントから渡された props を使用する場合は、それぞれ super() と super(props) を呼び出す必要がある

補足

上記の説明は、ReactJSにおける super() と super(props) の基本的な違いについて説明したものです。より詳細な情報は、ReactJS の公式ドキュメントを参照してください。

// 親コンポーネント
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  incrementCount = () => {
    this.setState({
      count: this.state.count + 1,
    });
  };

  render() {
    return (
      <div>
        <h1>親コンポーネント</h1>
        <p>カウント: {this.state.count}</p>
        <ChildComponent count={this.state.count} incrementCount={this.incrementCount} />
      </div>
    );
  }
}

// 子コンポーネント
class ChildComponent extends React.Component {
  constructor(props) {
    super(props);

    // 親コンポーネントから渡された props を受け取る
    this.props = props;
  }

  render() {
    return (
      <div>
        <h2>子コンポーネント</h2>
        <p>受け取ったカウント: {this.props.count}</p>
        <button onClick={this.props.incrementCount}>カウントを増やす</button>
      </div>
    );
  }
}

// ReactDOM.render(<ParentComponent />, document.getElementById('root'));

親コンポーネントは count という状態変数を持ち、その値を表示します。
親コンポーネントは incrementCount という関数を持ち、count の値を増やすことができます。
親コンポーネントは ChildComponent に count と incrementCount を props として渡します。
子コンポーネントは props で受け取った count の値を表示します。

このサンプルコードを実行すると、ブラウザに以下のような画面が表示されます。

親コンポーネント

カウント: 0

子コンポーネント

受け取ったカウント: 0

カウントを増やす

カウントを増やす ボタンをクリックすると、親コンポーネントの count の値が増え、その値が親コンポーネントと子コンポーネント両方で更新されます。

super() と super(props) の代わりに他の方法を使う場合

コンストラクタを使わずに、クラスのプロパティとメソッドを直接定義することができます。

class ParentComponent extends React.Component {
  state = {
    count: 0,
  };

  incrementCount = () => {
    this.setState({
      count: this.state.count + 1,
    });
  };

  render() {
    return (
      <div>
        <h1>親コンポーネント</h1>
        <p>カウント: {this.state.count}</p>
        <ChildComponent count={this.state.count} incrementCount={this.incrementCount} />
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        <h2>子コンポーネント</h2>
        <p>受け取ったカウント: {this.props.count}</p>
        <button onClick={this.props.incrementCount}>カウントを増やす</button>
      </div>
    );
  }
}

この方法では、コンストラクタが存在しないため、super() と super(props) を呼び出す必要はありません。

getDerivedStateFromProps は、親コンポーネントの props が更新されたときに、子コンポーネントの状態を更新するためのライフサイクルメソッドです。

class ChildComponent extends React.Component {
  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.count !== prevState.count) {
      return {
        count: nextProps.count,
      };
    }

    return null;
  }

  render() {
    return (
      <div>
        <h2>子コンポーネント</h2>
        <p>受け取ったカウント: {this.props.count}</p>
        <button onClick={this.props.incrementCount}>カウントを増やす</button>
      </div>
    );
  }
}

useMemo は、コンポーネントのレンダリング中に計算される値をキャッシュするための React Hook です。

const ChildComponent = ({ count, incrementCount }) => {
  const memoizedCount = useMemo(() => count, [count]);

  return (
    <div>
      <h2>子コンポーネント</h2>
      <p>受け取ったカウント: {memoizedCount}</p>
      <button onClick={incrementCount}>カウントを増やす</button>
    </div>
  );
};