デイステートとライフサイクルメソッド - ReactJS

「30 日間の ReactJS」チャレンジの 5 日目へようこそ!今日は、React の 2 つの基本概念であるステート メソッドとライフサイクル メソッドについて説明します。これらを理解すると、動的で対話型のアプリケーションを作成できるようになります。

状態とは何ですか?

React の

State は、コンポーネントの存続期間中に変化する可能性のある情報を保持する組み込みオブジェクトを指します。読み取り専用で親コンポーネントから継承されるプロパティとは異なり、状態はコンポーネントに対してローカルであり、内部で変更できます。

状態を黒板のように考えてください。必要に応じて情報を書き込んだり消去したりできるため、コンポーネントがユーザー入力やデータの取得などの変更に適応できるようになります。

例: カウンターコンポーネント

ボタンがクリックされたときにカウントを増やす単純なカウンター コンポーネントを作成してみましょう:

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

ここで、useState は機能コンポーネントに状態を追加できるようにする React フックです。 count 変数は現在の状態を保持し、setCount はそれを更新する関数です。

ライフサイクル メソッドとは何ですか?

ライフサイクル メソッド は、コンポーネントのライフサイクルの特定の時点でコードを実行できるようにする React クラス コンポーネントの特別なメソッドです。このライフサイクルには、マウント (DOM への追加)、更新 (再レンダリング)、アンマウント (DOM からの削除) が含まれます。

React フックの導入によりクラス コンポーネントはあまり一般的ではなくなりましたが、ライフサイクル メソッドを理解することは依然として重要であり、特に古いコードベースを使用する場合には重要です。

例:componentDidMount

一般的なライフサイクル メソッドは、componentDidMount で、コンポーネントが最初にレンダリングされた後に実行されます。 API からのデータの取得など、データの初期化によく使用されます:

class DataFetcher extends React.Component {
  state = { data: null };

  componentDidMount() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }

  render() {
    return (
      <div>
        {this.state.data ? (
          <p>Data: {this.state.data}</p>
        ) : (
          <p>Loading...</p>
        )}
      </div>
    );
  }
}

この例では、コンポーネントが DOM に追加されるとすぐに、componentDidMount がデータをフェッチし、フェッチされたデータで状態が更新されます。

実際の例: レストランの注文
レストランでの注文 (部品の取り付け) を想像してください。キッチンは、注文が入ると料理の準備を開始します (componentDidMount)。料理の準備中 (更新中)、ステータスの更新が表示される場合があります。最後に、料理が提供され、食事は終了します (コンポーネントのアンマウント)。

Vite の状態とライフサイクル

開発環境に Vite を使用しているため、状態メソッドとライフサイクル メソッドのセットアップはシームレスです。 Vite の高速開発サーバーにより、開発中に状態の変更とライフサイクル メソッドがほぼ瞬時に反映されます。

状態メソッドとライフサイクル メソッドを含めるようにプロジェクトを構造化する方法は次のとおりです。

1. 状態の初期化: 機能コンポーネントで useState を使用して動的データを管理します。
2. ライフサイクルのクラス コンポーネント: クラス コンポーネントを使用している場合は、componentDidMount やcomponentWillUnmount などのライフサイクル メソッドを実装して、副作用を管理します。

まとめ

ステート メソッドとライフサイクル メソッドは、動的で応答性の高い React アプリケーションを作成するために重要です。ステートを使用すると、コンポーネントを対話型にすることができますが、ライフサイクル メソッドを使用すると、コンポーネントが DOM と対話する方法とタイミングを制御できます。

明日は、アプリケーションの対話性をさらに強化する React でのイベントの処理について説明します。

以上がデイステートとライフサイクルメソッド - ReactJSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。