面接の質問 - React (6): React コンポーネントとライフサイクル

1. 反応コンポーネント

React コンポーネントの紹介:
React コンポーネントは、ユーザーインターフェイスを構築するための基本単位です。インターフェースを独立した再利用可能な部分に分割し、コードをよりモジュール化して保守しやすくします。React コンポーネントは、入力データ (props と呼ばれる) を受け取り、ユーザーインターフェイスを表す React 要素を返す関数コンポーネントまたはクラスコンポーネントです。

React コンポーネントの作成:
React では、関数コンポーネントとクラスコンポーネントという 2 つの方法でコンポーネントを作成できます。以下にこれら 2 つのメソッドの作成方法をそれぞれ紹介します。

関数コンポーネント:
関数コンポーネントは、コンポーネントを作成する最も簡単な方法であり、パラメーターとして props を受け取り、React 要素を返す純粋な関数です。機能コンポーネントは、内部状態やライフサイクル要件のない単純なコンポーネントに適しています。

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

上の例では、プロパティを props として受け取り、ウェルカムメッセージを含む要素を返すGreeting関数コンポーネントです。nameh1

クラスコンポーネント:
クラスコンポーネントは、ES6 クラス構文を使用して作成されたコンポーネントであり、React.Componentクラスを継承し、内部状態およびライフサイクル関数を持つことができます。クラスコンポーネントは、状態管理やライフサイクル制御を必要とする複雑なコンポーネントに適しています。

import React from 'react';

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

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

上の例では、はCounterから継承するクラスコンポーネントでありReact.Component、内部状態countと、ボタンのクリック時にカウンタ値をインクリメントする関数を備えています。

コンポーネントの使用:
関数コンポーネントでもクラスコンポーネントでも、HTML タグなどの他のコンポーネントのレンダリング関数で使用できます。

import React from 'react';

function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
      <Counter />
    </div>
  );
}

上記の例では、コンポーネント内でAppあらかじめ定義したGreeting関数コンポーネントとクラスコンポーネントを利用しています。Counter

2. 反応ライフサイクル

React ライフサイクルは、React コンポーネントを理解して習得するための鍵となります。ライフサイクルメソッドを適切に使用することで、さまざまな段階で必要な操作を実行し、よりきめ細かい制御と対話を実現できます。

React ライフサイクルメソッド

React ライフサイクルメソッドは、マウントフェーズ、更新フェーズ、アンマウントフェーズの 3 つの主なフェーズに分類できます。各フェーズとそれに対応するライフサイクルメソッドについては、以下で詳しく説明します。

マウントフェーズ:
コンポーネントが DOM に挿入されるときに呼び出されます。

コンストラクター(小道具)：

コンストラクター。コンポーネントの状態とバインディングメソッドを初期化するために使用されます。通常、コンポーネントの内部状態はこの段階で初期化されます。

与える（）：

Render メソッドは、コンポーネントの UI を表す React 要素を返します。UI コンテンツはこのメソッド内で返される必要があります。

コンポーネントDidMount()：

コンポーネントがマウントされた後に呼び出され、ネットワーク要求、DOM 操作、または初期化操作に適しています。このフェーズは、非同期データのフェッチによく使用されます。

更新フェーズ:
コンポーネントのプロパティまたは状態が変更されたときに呼び出されます。

与える（）：

更新フェーズでは、render メソッドを呼び出してコンポーネントの UI を再レンダリングします。

ComponentDidUpdate(prevProps, prevState)：

コンポーネントの更新後に呼び出され、DOM 更新、ネットワーク要求、またはその他の副作用操作をここで処理できます。prevProps および prevState パラメーターは、以前の props と状態を表します。

アンマウントフェーズ:
コンポーネントが DOM から削除されるときに呼び出されます。

コンポーネントウィルアンマウント()：

コンポーネントがアンインストールされようとしているときに呼び出され、ネットワーク要求のキャンセル、タイマーのクリアなどのクリーンアップ操作に適しています。

アイコン

反応ライフサイクル

コード例

以下は React ライフサイクルメソッドを使用した例で、ライフサイクルメソッドの実行順序と目的を示しています。

import React from 'react';

class LifecycleExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    console.log('constructor');
  }

  increment() {
    this.setState({
      count: this.state.count + 1
    })
  }

  componentDidMount() {
    console.log('componentDidMount');
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('componentDidUpdate', prevProps, prevState);
  }

  componentWillUnmount() {
    console.log('componentWillUnmount');
  }

  render() {
    console.log('render');
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.increment()}>increment</button>
      </div>
    );
  }
}

class App extends React.Component {
  state = { showComponent: true };

  toggleComponent = () => {
    this.setState({ showComponent: !this.state.showComponent });
  };

  render() {
    return (
      <div>
        {this.state.showComponent && <LifecycleExample />}
        <button onClick={this.toggleComponent}>Toggle Component</button>
      </div>
    );
  }
}

export default App;

初期化

[増分] をクリックしてカウントを増やします

toggleComponent をクリックしてコンポーネントをアンインストールします