React.jsの設計思想

React初学者が必ず押さえておきたい考え方とは?【コンポーネント指向のフロントエンド】 | in-Pocket インポケット

Reactの思想を理解してリファクタする - Qiita

上記HPを参考にしてます。

個人的に重要と思われるところから、再学習してみます。

まず、初めに、オブジェクト指向プログラミング言語を知っているか否か、クラス型コンポーネントを知っているか否かで、理解できる説明というのが全然変わってきます。

ここでは、どちらも知らないという前提での説明とします。

 

①初めに絶対理解しておかなければ先へ進めない事柄ですが、変数の値は、決まった手順でしか変更できないということです。決まった手順とは、useState()を使うということです。通常のJavaScriptみたいに、代入で単純にどんどん上書き保存ができないのです。

②次に、念頭に置くべきは、state(に当たるもの)が変更された際には、そのコンポーネントの関数が再度実行される。(これをしてほしくないときもあるので、その場合はわざわざそういう処理を書く必要があります。

これら2つのことがわからないと、『Reactに乗れない』のです。

 

③次に、コンポーネント指向です。分割統治法や単一責任の原則が挙げられています。あとは、ロジックは別に分けるなども必要かもしれません。(カスタムフックを使う)

 

これだけ理解していれば書けそうです。

 

 

クラス型コンポーネントは知らないのでそのバージョンは書けませんが、

オブジェクト指向プログラミング言語を知っている方用の説明は書けそうです。

上の番号と対応して書きます。

カプセル化に該当します。クラス内の変数の変更は、直接変更できないように、privateで定義し(例えば name)、外部からは、メソッドでしか         (例えば、setName())変更できないようにするということです。setterのことです。

②は特に記載なし

③ コンポーネント指向でいっていることは、オブジェクト指向の概念そのものです。