Day 4-関数構成部品、props/構成部品/callback/form

4日目
1)関数構成部品
クラス構成部品よりも短く直感的なコード
Hooksを導入すると、クラス要素のライフサイクルメソッドなどの機能が利用できます.推奨関数構成部品+Hooks組合せ
2)props、構成部品、コールバック、フォーム

props
Reactによって作成されたユーザ定義要素としてのエンティティが見つかった場合、JSXはそのサブアイテムを単一のオブジェクトとして要素に渡します.このオブジェクトをpropsと呼びます.
読み取り専用

構成部品構造
新しい関数やオブジェクトを作成するときと同じです.1つのテクニックは単一責任の原則です.これは理想的な原則であり、1つの素子は1つのことしかできない.1つの素子が大きくなると、より小さなサブ素子に分離する必要があります.
JSONデータは通常ユーザに表示されるため、データモデルが適切に作成されるとUI(コンポーネント構造)が良好に接続される.これは,ユーザインタフェースとデータモデルが同じ情報アーキテクチャ(Information Architecture)を有するためである.各構成部品を分離してデータモデルの一部を表してください.

callback
onClickなどのイベントハンドラをコンポーネントに渡すにはどうすればいいですか?
イベントハンドラとその他の関数をPropertyとしてサブエレメントに渡します.

<button onClick={this.handleClick}>

コントロールスライダで親構成部品にアクセスする必要がある場合は、関数を構成部品インスタンスにバインドする必要があります.

Form
HTMLでは、フォーム要素(input、textarea、selectなど)は、通常、ユーザーの入力に基づいてステータスを管理および更新します.変更可能なステータスは、通常、構成部品のstateプロパティに保持され、setState()によって更新されます.

[ソース]
https://ko.reactjs.org/