React の流儀 – React (reactjs.org)
今は、Thinking in React に変わっています。これを自動翻訳にすると、React⇒反応、State⇒州などと訳されていて読めたものではありません。
このため古いReactの流儀を読んでみます。
１～４までは理解しやすいです。５は難解。
１．UIをコンポーネント階層に落とし込む
一つのコンポーネントは、一つのことだけすべきだという考え方のもとで作成し、そのコンポーネントを階層化することで、UIを作成するということでしょうか。
２．静的なバージョンをまず作成すべし
コンポーネントは、表示と機能を担ってますが、まず、表示だけのものを作成せよということでしょうか。この場合、propsは必要ですが、stateは必要ないことがわかります。これは３や４につなげるために理解しておく必要があるようです。
３．必要かつ十分なStateを作成する
動的なものにするためには、機能を追加し、UIとして、ユーザーの入力に対して出力するようなものを作成していくことになります。その際にStateは必要かつ十分に作成すべしということでしょう。
４．Stateをどこにおくべきか明確にする
これは経験でしか培えないように思えます。
redux toolkitや、zustandなどを使用すれば、これは考えなくてもよい。
５．については、使うことがあまりないので、一言だけ。
『Reactの流儀』内でもかかれているとおり、Reactは単方向性のデータフローが特徴ですので、よほどのことがない限り考える必要はなさそう。
まとめると、下記のようになると思います。
・一つのコンポーネントは、一つの役割に専念させるべきであり、そのように作成したコンポーネント群を階層化して、UIを作成するようにしてください。
・まずは、静的なバージョンをpropsを用いて、『表示』の部分を作成し、その次に、必要かつ十分なstateを、どのコンポーネントに置くべきかを考えて配置し、『機能』の部分を作成するようにしてください。
