reactにおけるstateの略語の詳細な説明

序文

国家とは何か

私たちは皆、React はステートマシンであると言います。それはどのように反映されるのでしょうか。それは状態に反映されます。ユーザーとのインタラクションを通じてさまざまな状態が実現され、その後 UI がレンダリングされるため、ユーザーのデータとインターフェイスの一貫性が保たれます。状態はコンポーネントのプライベートプロパティです。

React では、コンポーネントの状態を更新すると、ユーザーインターフェイスが再レンダリングされます (DOM を操作せずに)。つまり、状態が変化するとユーザーインターフェイスも変化します。

PS: 状態はこのコンポーネント内でのみ初期化でき、状態を変更および照会できるのはこのコンポーネントのみであり、外部から照会および変更することはできないため、状態はコンポーネントに対してプライベートであるとも言えます。

以下は、React の状態を記述する簡単な方法です。

状態は react での初期化に使用されます。 this.state はコンポーネントのプライベートプロパティと見なす必要があります。React の状態を記述する方法は 2 つあります。1 つは、公式 Web サイトで紹介されているコンストラクターです。

 コンストラクタ(props) {
    スーパー(小道具);
    この状態 = {
      値: null、
    };
  }

しかし、クラスコンポーネントで状態を使用する場合、クラスはReact.Componentを継承します。

クラスAppはReact.Componentを拡張します。
         //ここで定義する状態は上記のメソッドと同じです // クラスにstate={aff:1}という代入文を直接記述できます
 
             与える（）{  
                 console.log(これを);
                 //これはReact.Componentを継承します
                 // ここでは、現在のコンポーネントのインスタンスオブジェクトを返します (
                     <div>
                       123
                     </div>
                 ）
             }
       }

       ReactDOM.render() は、
           <予約/>、
           ドキュメント.getElementById('アプリ')
       ）

皆さんはこれが何を印刷しているか見たいと思います。下を見てください。

ここに画像の説明を挿入

これを短縮状態で印刷した結果がこれです。これを公式ウェブサイトで印刷した結果を見てみましょう。

 クラスAppはReact.Componentを拡張します。
        コンストラクタ(props) {
            スーパー(小道具)
            コンソールログ(これ、11);
           // これは状態を初期化する通常の方法です this.state={
                番号: 456
            }
        }
             与える（）{  
                 戻る （
                     <div>
                       123
                     </div>
                 ）
             }
       }

       ReactDOM.render() は、
           <予約/>、
           ドキュメント.getElementById('アプリ')
       ）

どちらの方法でも印刷結果は同じです。

ここに画像の説明を挿入