React | State & Event

1. State?

状態

素子内部素子の状態値

画面には、素子UI情報(状態)を表示するオブジェクト

が含む.

状態は、要素内でデータ(オブジェクト)

を定義、使用、および変更することができる.

2.Stateオブジェクト

州とは?画面に表示する構成部品のUI情報(ステータス)を含むオブジェクト.

1朕素子の状態を対象とする(object).
親要素のステータスデータを子要素に反映できます.
2▼▼▼対象のキー名は自由に設定できます(色の部分)
3▼▼▼▼▼▼カラーキー
redを4"キー(color)の値に指定

クラス要素において、<State />クラス要素の状態を以下のように定義する.

1𗞚宣言類<State />素子の場合はclass State extends Component2▁▁類要素は、render() 함수およびその中のreturn()を使用しなければならない.
3𗞚𗞚設定状態の場合、constructor関数を記述します.ここでは初期設定値が必要です...!
4constructor関数でsuper()を呼び出します.
5this.stateは、構成部品の初期値を設定する必要があります.

3.Stateの使用

なぜstateでステータス値を設定しますか?

コンポーネント内の要素にステータス値を反映し、データを変更するたびに画面(UI)に効率的に表示できるようにします.

1▼▼<h1>のフォントカラーは、エレメント設定の状態値でスタイルを付与したい場合は<h1>にライン内スタイルを適用します.
2<h1>ラベルにstyle={{color:this.state.color}}を記入します.
ここでちょっと待ってください.
📍 this:構成部品=State
📍 this.state:この構成部品を含むstateオブジェクト
📍 this.state.color:状態におけるオブジェクトの特定キーの値=red

4. Event & setState

4.1. setSate()

イベントによってstateデータを変更する関数です.(UIのデータが変更されます!)
stateは✔setSateのみで変更できます.
まずeventを励起する<button>要素を追加した.

1」<button onClick={this.handleColor}>Click</button>:ボタンラベル上でonClickイベントが発生します.
29601;HandleColorとして定義された関数はonClick={this.handleColor}で実行されます.(ここで、これはState素子)
3πHandleColor関数を実行するとsetState関数が実行されます.

handleColor = () => {
    this.setState({
      color: 'blue'
    })
  }

一般的な関数とは異なり、矢印関数にはthis...!
4朕が実行する関数は、color(key)の値を「blue」に変更する.
5πrender()関数を呼び出す
6π𗞚ボタンをクリックすると、<h1>ラベルの色が変わります.

4.2. Reactは宣言的!

¥¥¥¥¥¥(興味ない…)
¥¥stateだけが気になります.それぞれのstateで独自のUIを設定します.
表示が必要なUIは2479142関数から返されます!
⑪战战战战战战战战战25126
既存のバニラJavaScriptとは異なり、プログラム的ではなく宣言的です.すなわち、宣言に従って更新されたstate値が変更され、有効になります.
¥¥¥ААААААААААААААА

4.3. インラインスタイルの削除

メンテナンスが難しい.
➊デバッグ時にcssファイルが表示され、inline要素に設定されている場合は、複数のファイルを必要とせずに表示すると不便になります.