Reactの状態の理解についての簡単な分析

複雑なコンポーネント (クラスコンポーネント) と単純なコンポーネント (関数コンポーネント) をどのように定義するのでしょうか?

状態があるかどうか

すると、「国家とは何か？」という疑問が生じます。

たとえば、私は今日の試験に不合格になりましたが、それは私の体調が良くなく、私の体調が私の行動に影響を与えたからです。
コンポーネントの状態によってページの更新が行われます。つまり、コンポーネントの状態にはデータが保存され、データの変更によってページの更新が行われます。

ここに画像の説明を挿入

ここで理解する必要があるのは、それが誰の状態なのかということです。状態は、コンポーネントクラス自体ではなく、このクラスによって作成されたインスタンスのコンポーネントインスタンスオブジェクトの状態です。

(クラス) コンポーネントインスタンスの3つの主要な属性の1つ: 状態

コンテンツを表示

ここに画像の説明を挿入

ページをクリックして、ホット/クールスイッチで要件を実現します

ここに画像の説明を挿入

<!DOCTYPE html>
<html lang="ja">
  <ヘッド>
    <メタ文字セット="UTF-8" />
    <meta http-equiv="X-UA-compatible" content="IE=edge" />
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0" />
    <title>反応する</title>
  </head>
  <本文>
    <div id="test"></div>
    <!-- コアライブラリをインポート-->
    <script src="../js/react.development.js"></script>
    <!-- 拡張ライブラリ -->
    <script src="../js/react-dom.development.js"></script>
    <!-- jsx を js に変換 -->
    <script src="../js/babel.min.js"></script>
    <script type="text/babel">
      // 1. コンポーネントを作成する class Weather extends React.Component {
        /**
         * コンストラクターで受け取れるデータは、new が呼び出されたときに渡されるデータによって異なります。 * New Weather は私たちではなく react によって操作されます。 */
        コンストラクタ(props) {
          // まだ props を学習していませんが、使用する必要があります。公式サイトを真似て記述します // クラス構文 super(props);
          // コンストラクタでは、これはコンストラクタインスタンスオブジェクトを指します // 16.8 より前では状態は {} ですが、16.8 以降では null です
          この状態 = {
            isHot: true、
          };
        }
        与える（） {
          console.log("これ:", これ);
          <h1>今日はとても暑いですね</h1>を返します。
        }
      }
      // 2. ページにコンポーネントをレンダリングします。ReactDOM.render(<Weather />, document.getElementById("test"));
    </スクリプト>
  </本文>
</html>

ここに画像の説明を挿入

データの初期化

<!DOCTYPE html>
<html lang="ja">
  <ヘッド>
    <メタ文字セット="UTF-8" />
    <meta http-equiv="X-UA-compatible" content="IE=edge" />
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0" />
    <title>反応する</title>
  </head>
  <本文>
    <div id="test"></div>
    <!-- コアライブラリをインポート-->
    <script src="../js/react.development.js"></script>
    <!-- 拡張ライブラリ -->
    <script src="../js/react-dom.development.js"></script>
    <!-- jsx を js に変換 -->
    <script src="../js/babel.min.js"></script>
    <script type="text/babel">
      // 1. コンポーネントを作成する class Weather extends React.Component {
        /**
         * コンストラクターで受け取れるデータは、new が呼び出されたときに渡されるデータによって異なります。 * New Weather は私たちではなく react によって操作されます。 */
        コンストラクタ(props) {
          // まだ props を学習していませんが、使用する必要があります。公式サイトを真似て記述します。そうしないと機能しません。// クラス構文 super(props);
          // コンストラクタでは、これはコンストラクタインスタンスオブジェクトを指します // 16.8 より前では状態は {} ですが、16.8 以降では null です
          この状態 = {
            isHot: true、
          };
        }
        // 状態は Weather インスタンス オブジェクトにあります render() {
          console.log("これ:", これ);
          戻り値 <h1>今日の天気は非常に {this.state.isHot ? "暑い" : "涼しい"}</h1> です。
        }
      }
      // 2. ページにコンポーネントをレンダリングします。ReactDOM.render(<Weather />, document.getElementById("test"));
    </スクリプト>
  </本文>
</html>

ここに画像の説明を挿入

次に、クリックイベントを記述します。最初にエラーのデモンストレーションを行うことに注意してください。

 <script type="text/babel">
      // 1. コンポーネントを作成する class Weather extends React.Component {
        /**
         * コンストラクターで受け取れるデータは、new が呼び出されたときに渡されるデータによって異なります。 * New Weather は私たちではなく react によって操作されます。 */
        コンストラクタ(props) {
          // まだ props を学習していませんが、使用する必要があります。公式サイトを真似て記述します // クラス構文 super(props);
          // コンストラクタでは、これはコンストラクタインスタンスオブジェクトを指します // 16.8 より前では状態は {} ですが、16.8 以降では null です
          この状態 = {
            isHot: true、
          };
        }

        // 状態は Weather インスタンス オブジェクトにあります render() {
          console.log("これ:", これ);
          戻る （
            <h1 onClick={デモ()}>
              今日の天気は {this.state.isHot ? "hot" : "cool"} です
            </h1>
          );
        }
      }
      関数デモ() {
        console.log("デモが呼び出されました");
      }
      // 2. ページにコンポーネントをレンダリングします。ReactDOM.render(<Weather />, document.getElementById("test"));
    </スクリプト>

クリックイベントを呼び出すときは、 onClick={demo()}と記述します。
コンソールでは、関数がすぐに実行されていることがわかります。

ここに画像の説明を挿入

react が新しい Weather のインスタンスを介して render メソッドを呼び出す場合、戻り値を取得するには、<h1 onClick={demo()}>今日の天気は非常に {this.state.isHot ? "熱" : "凉"}</h1> を実行する必要があります。onClick代入文が実行されると、demo() 関数呼び出しの戻り値が onClick にコールバックとして渡されます。demo() の戻り値は unifend です。つまり、undifend が onClick にコールバックとして渡されます。demo の後に () を追加すると関数呼び出しになるため、これは間違ったアプローチです。 **クリックが発生すると、undifend が呼び出され、react がこの処理を処理します。undifend の場合、追加のアクションは発生しません。

よくある書き方の間違い

  与える（） {
          console.log("これ:", これ);
          戻る （
            <h1 onClick='demo()'>今日の天気は {this.state.isHot ? "hot" : "cool" です}</h1>
          );
        }

ここに画像の説明を挿入

 与える（） {
          console.log("これ:", これ);
          戻る （
            <h1 onclick='demo'>今日の天気は {this.state.isHot ? "hot" : "cool" です}</h1>
          );
        }

ここに画像の説明を挿入

正しい書き方

<!DOCTYPE html>
<html lang="ja">
  <ヘッド>
    <メタ文字セット="UTF-8" />
    <meta http-equiv="X-UA-compatible" content="IE=edge" />
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0" />
    <title>反応する</title>
  </head>
  <本文>
    <div id="test"></div>
    <!-- コアライブラリをインポート-->
    <script src="../js/react.development.js"></script>
    <!-- 拡張ライブラリ -->
    <script src="../js/react-dom.development.js"></script>
    <!-- jsx を js に変換 -->
    <script src="../js/babel.min.js"></script>
    <script type="text/babel">
      // 1. コンポーネントを作成する class Weather extends React.Component {
        /**
         * コンストラクターで受け取れるデータは、new が呼び出されたときに渡されるデータによって異なります。 * New Weather は私たちではなく react によって操作されます。 */
        コンストラクタ(props) {
          // まだ props を学習していませんが、使用する必要があります。公式サイトを真似て記述します // クラス構文 super(props);
          // コンストラクタでは、これはコンストラクタインスタンスオブジェクトを指します // 16.8 より前では状態は {} ですが、16.8 以降では null です
          この状態 = {
            isHot: true、
          };
        }

        // 状態は Weather インスタンス オブジェクトにあります render() {
          console.log("これ:", これ);
          戻る （
            <h1 onClick={デモ}>
              今日の天気はとても{this.state.isHot ? "暑い" : "涼しい"}です
            </h1>
          );
        }
      }
      関数デモ() {
        console.log("デモが呼び出されました");
      }
      // 2. ページにコンポーネントをレンダリングします。ReactDOM.render(<Weather />, document.getElementById("test"));
    </スクリプト>
  </本文>
</html>

ここに画像の説明を挿入

改訂

データは上記のページにレンダリングされており、ここでページ上のデータを変更します。データを変更する場合は、まず状態の isHot を取得する必要があります。間違った書き方を見てみましょう。

 関数デモ() {
        console.log("デモが呼び出されました");
        // エラーのデモンストレーション const { isHot } = this.state;
        console.log("isHot", isHot);
      }

ここに画像の説明を挿入

プロンプトは xxx of undefined (読み方は「state」) で、これは未定義の状態を意味します。xxx が未定義の場合、undefined.state によってこのエラーが報告されます。ここでのxxxはこれを指します。
これを印刷してみましょう

  関数デモ() {
        // エラーのデモンストレーション console.log("this", this);
        const { isHot } = this.state;
        console.log("isHot", isHot);
      }

ここに画像の説明を挿入

コード構造とコメントを見てみましょう

ここに画像の説明を挿入

印刷してみると、カスタム関数をクラス外に配置すると、データは正しく表示できるものの、状態内のデータを取得・変更できないことがわかります。

  WeatherクラスはReact.Componentを拡張します。
        /**
         * コンストラクターで受け取れるデータは、new が呼び出されたときに渡されるデータによって異なります。 * New Weather は私たちではなく react によって操作されます。 */
        コンストラクタ(props) {
          // まだ props を学習していませんが、使用する必要があります。公式サイトを真似て記述します // クラス構文 super(props);
          /**
           * コンストラクタでは、これはコンストラクタインスタンスオブジェクトを指します。 * 16.8より前では、状態は{}で、16.8以降ではnullです。
           * 状態は Weather のインスタンス オブジェクト内にあります */
          この状態 = {
            isHot: true、
          };
        }
        // 天気を切り替えるデモ() {
          console.log("これ", これ);
          const { isHot } = this.state;
          console.log("isHot", isHot);
        }
        // レンダリング render() {
          console.log("これ:", これ);
          戻る （
            <h1 onClick={デモ}>
              今日の天気は {this.state.isHot ? "hot" : "cool"} です
            </h1>
          );
        }
      }

クラスは関数本体ではないので、関数を書く必要はありません。

これで、React の状態の理解についての簡単な分析の記事は終了です。React の状態の理解についてさらに詳しく知りたい場合は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: