Reactの3つの主要属性における状態の使用の詳細な説明

React では多くの場所でデータが必要となり、これを React では状態と呼びます。状態を管理するには特別な方法が必要なため、状態関連のメソッドが生まれました。状態には、2 つの基本的な機能が必要です。1 つ目は、React で使用できるように特定の値を保存できること、2 つ目は、React で監視して変更があった場合に再レンダリングできることです。ここでは、クラスと関数コンポーネントでそれぞれ状態を記述する方法を紹介します。

クラスコンポーネント

クラスClassComponentはReact.Componentを拡張します{
    コンストラクタ(props){
        スーパー(小道具)
    } //オプションのrender(){
        戻る （
            //ここにjsx構文を記述できます)
    }
}

通常、状態を変更するには setState を使用します。変更するオブジェクトまたはコールバック関数を直接渡すことができます。オブジェクトが渡された場合、React はディープ コピーではなく、浅いコピーのみを作成することに注意してください。したがって、オブジェクト内の他のオブジェクトが変更された場合、React はレンダリングすることを認識できません。このメソッドは基本的に新しい値を渡して元の値を上書きします。この値が元の値と同じ場合、React はレンダリングしません。

React はなぜ面倒なのでしょうか? 値を直接変更することはできないのでしょうか? React には、可変性と呼ばれる概念があるからです。 React は setState での状態の変化を通じて何が起こったかを認識し、レンダリングします。状態が直接変更された場合、React はそれを認識できず、レンダリングできません。簡単に言えば、Vue のような双方向データバインディングはありません。

クラス コンポーネント内のコンストラクターは記述しても記述しなくてもかまいません。このコンストラクターを記述する主な機能は 2 つあります。

• this.stateにオブジェクトを割り当てて内部状態の値を初期化する

コンストラクタ(props){
    スーパー(小道具)
    this.state = {n:12}
}

与える（）{
    戻る （
        <div>
                <h1>時間は {this.state.n} です</h1>
        </div>
    ）
}

ここでsetStateを書くことはできないことに注意してください。上記のReactメソッドは外部から設定することもできます。

状態 = {n:12}

与える（）{
    戻る （
        <div>
            <h1>時間は {this.state.n} です</h1>
        </div>
    ）
}

• インスタンスをイベントハンドラにバインドする

コンストラクタ(props){
    スーパー(小道具)
    this.addNum = function(){fn()}.bind(this)
}

与える（）{
    戻る （
        <button onClick={this.addNum}>+1</button>
    ）
}

ただし、このメソッドは React では新しいメソッドに置き換えられました。コードは次のとおりです。

追加番号 = ()=>{
    関数()
}

与える（）{
    戻る （
        <button onClick={this.addNum}>+1</button>
    ）
}

したがって、親クラスのメソッドを継承するために上記のコンストラクターを記述する必要はありません。

機能コンポーネント

「react」から{useState}をインポートします
関数 FunctionComponent(){
    const [data,setData] = useState("渡す初期値")
    戻る （
        <div>データを表示 {state}</div>
    ）
}

ここでの setData の機能は setState と似ていますが、データの状態を変更するためにのみ使用でき、変更が必要なときにコールバック関数が渡されます。この関数は、前の値を引数として受け取り、変更する値を返します。このメソッドの本質は、新しいオブジェクトを渡して、以前の React オブジェクトの値を変更することです。 この目的のために、変更された値を直接書き込むこともできます。デフォルトでは、現在のオブジェクトに対応し、その値を変更します。上記の方法は、元のsetStateよりもはるかに簡単ですが、問題は、複数のデータがある場合、useStateを複数回実行する必要があり、一度に複数の値を渡すことができないことです。ただし、ほとんどの場合、データ管理の問題は Redux によって管理されるため、React 自体は心配する必要はありません。

setStateの落とし穴

React コンポーネントの状態を変更するときによくある問題は、setState の値のマージです。次の質問を見てください。

this.addNum = 関数（）{
            this.setState({num:this.state.num+1})
            this.setState({num:this.state.num+1})
            this.setState({num:this.state.num+1})
        }.bind(これ)

このとき、addNum 関数が呼び出されると、num は 1 だけ増加します。思ったように 3 は追加されませんでした。 React 自体はこれを次のように説明しています:

setState の呼び出しは非同期です。setState を呼び出した後、this.state がすぐに新しい値にマップされるとは思わないでください。

これについての説明は次のとおりです。

1. setState を何度呼び出しても、更新はすぐには実行されません。代わりに、更新する状態を '_pendingStateQuene' に保存し、更新するコンポーネントを 'dirtyComponent' に保存します。
2. ルート コンポーネントがマウントされると、バッチ メカニズムは false に更新されます。このとき、「_pendingStateQuene」と「dirtyComponent」の状態とコンポーネントを取り出してマージし、更新します。

簡単に言うと、React を実行すると、パフォーマンスを向上させるために、更新する setState を配列に格納します。React 自体の同期コードを実行すると、更新前に配列内の setState を取り出してレンダリングします。上記のコードでは、setState に同期コード this.setState({num:this.state.num+1}) を追加したため、バッチ処理が取り出されると、マージが発生し、多数の setState が 1 つの文にマージされ、1 つだけが変更されます。この仕組みにより、setState は非同期コードのように見えますが、実際には同期的に実行されます。このとき、これまでの同期コードを非同期に変更すると、希望する結果が得られます。

this.addNum = 関数（）{
            setTimeout(()=>{ this.setState({num:this.state.num+1}) },0)
            setTimeout(()=>{ this.setState({num:this.state.num+1}) },0)
            setTimeout(()=>{ this.setState({num:this.state.num+1}) },0)
        }.bind(これ)

この時点では、非同期コードは実行中に一時的に保存されるため、値は直接 3 増加します。全ての同期コードが実行された後に実行されます。このとき、バッチ処理機構は終了しているので、3つの関数は全て実行されるので、3が追加されます。今のところ思いつくのはこれだけです。今後新しいものがあれば追加していきます。

以上がReactの3大属性の1つであるstateの使い方を詳しく解説した内容です。Reactの3大属性の1つであるstateについてさらに詳しく知りたい方は、123WORDPRESS.COMの関連記事もぜひご覧ください！