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

1349 ワード
テキストリンク
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/
    JavaScript:非同期処理
    4日目