React コンポーネント

コンポーネントで大事な３要素

・ Props ・ Local State ・ ライフサイクル

Props

親コンポーネントから子コンポーネントのデータを受け渡す際に、親コンポーネントから受け取る値のこと。

Local State

コンポーネント内部の状態を規定するもの。 下は関数incrementで数値を足すカウンターのコードだが、AppStateやthis.stateがLocalStateに当たる。 AppStatは変数countで数値を保持する。

interface AppState {
  count: number;
}

class App extends Component<{}, AppState> {
  constructor(props: {}) {　　　//コンストラクラクターでインスタンス生成時初期化
    super(props);                         //
    this.state = { count: 0 };       //カウンター値を0にセット
  }

  increment() {
    this.setState(prevState => ({   //this.stateには直接数値がセットできないので、値の設定には必ず setState() メソッ ドを使う
      count: prevState.count + 1,   
    }));
  }

.
.
.
  render() {
    const { count } = this.state;

    return (  
     <Button color="green" onClick={() => this.increment()}> 
.
.
.
   )
}

ちなみにReactのデータは親コンポーネントから子コンポーネントに流れるので、 親コンポーネントクラスのAppが自身の状態を変更する関数を子コンポーネント（Button）に渡して、 ボタン入力時に発火されるイベントにその関数を仕込んでいる（onClick={() => this.increment()）

コンポーネントのライフサイクル

コンポーネントのライフサイ クルとは、初期化されてマウントされレンダリングされ、何らかの処理が行われて再レンダリングさ れたりして、最後にアンマウントされるまでの過程。

1. Mounting ...... コンポーネントが生成され DOM ノードに挿入されるフェーズ
2. Updating ...... 変更を検知してコンポーネントが再レンダリングされるフェーズ
3. Unmounting ...... コンポーネントが DOM ノードから削除されるフェーズ
4. Error Handling ...... そのコンポーネント自身および子コンポーネントのエラーを捕捉す

これらのライフサイクルの各フェーズに介入して任意の処理を差し込むことができる メソッドが存在する。

【メモ】分割代入とは

オブジェクトの分割代入は、オブジェクトからプロパティを取り出して対応する変数に代入する構文。

let {a, b} = {a: 0, b: 1};  //a,bと言う独自の変数を作って、対応するプロパティの値を代入する。
console.log(a, b);  // 0 1