Reactを学ぶ10

June 8, 2020

以下を参考に。 React の流儀

作業時間：1時間経過時間：32時間

Reactの流儀

総おさらいの章。

コンポーネントを分割するフェーズ。

データモデルからUIの描画だけ実装するフェーズ。トップダウンからでも、ボトムアップからでも良いが、大規模開発では、ボトムアップからの方がテストしやすい。

インタラクティブな設計をするフェーズ。（データモデルの更新可能な設計）

stateをどのように決定するのか。 stateとpropsについて。以下に一致しない時は、stateとみなす。

親からpropsとして参照できるデータか
時間経過で変化しないままのデータか
propsやstateから算出可能なデータか (1)はあんまり考える必要がない、(2)はユーザー操作から影響を受けるかどうか、(3)は(2)の結果的に影響を受けるかどうか。つまりは、ユーザー操作以降で影響を受けるデータかどうかを見極れれば良い。 ※ユーザー操作以外のajaxなどもあるから一概には言えないけど、そういうイメージ。

stateを所有するコンポーネントを決定するフェーズ。

所有させるコンポーネントの指標について。 stateを取り扱うすべてのコンポーネントより、共通の親コンポーネントを探し出す。 ※もし探しきれない場合は、stateを保持するだけのコンポーネントを作成し、親コンポーネントの上に配置する。

子コンポーネントから、stateを更新する処理を設計するフェーズ。

親コンポーネントには、stateを更新する子コンポーネントにコールバックを渡す。コールバックが実行されたら、親コンポーネントはsetState()を呼び出し、stateを更新する。

stateは所有するコンポーネントで更新される、ということ。

「Main Concepts」は一読した。 Reactの基本的な設計には、どのコンポーネントにstateを所有させるか、が大きく関わっている。上記の決定のため、コンポーネントを適切に切り分ける必要がある。そのための実装等が記載されている、という所感を得た。

contextとは。 refとは。 High-Order Componentとは。ポータルとは。レンダープロップとは。

横断的関心事をどう解決するのか。ミックスインは非推奨となった。