2018-10-02に更新

Twitterを作る 第4回 コンポーネント構成考察

Reactのコンポーネントの構成にちょっと悩んだのでメモ。

現在ログイン後の画面はreact-routerでルーティングしている。(まだ1画面しかないが)
コンポーネントの構成は下記のようになっている。

  • Main (routing)
    • MainIndex (メインページ)
    • MainHeader (共通ヘッダ)
    • MainPosts (投稿一覧)
      • MainPost (投稿表示)

一体何を悩んだかというと、MainHeaderは各ページで共通で利用するため、本当は元々下記のようにしていた。

  • Main (routing)
    • MainHeader
    • MainIndex (メインページ。ここをroutingで切り替える)
    • MainHeader (共通ヘッダ)
    • MainPosts (投稿一覧)
      • MainPost (投稿表示)

問題1

ただ、これだと問題があった。
投稿はMainHeader内にネストするフォームで行うが、その際に最新の投稿一覧をMainPosts側に読み込ませたい。
しかしMainHeaderとMainPostsは親子関係で連なっていないため、連携ができない。

問題2

posts(投稿配列)のstateをどこに持たせるかという問題。
なるべくMainで持たせたかった。何故かと言うと、MainHeaderには検索ボックスなどもあるので、
それのハンドリングのコードも記述しなければならないが、
MainHeaderを下の方においてrender時にDOM指定するとそのコードを何度も書かなければならない。

構成の解決

DOMにrefを付けることによって子コンポーネントのメソッドを呼べたりするのでその辺りも考えたが、

Refsの詳細 | React 0.13 日本語リファレンス | js STUDIO

の下の注意を読んで欲しい。

Reactを使用したプログラムの開発経験が乏しいと、 アプリケーションで"何かを実現する"のに、すぐにrefsを使いたくなるかもしれません。

このような場合は、stateがコンポーネント階層の何処で所有されるべきなのかを、もう少し注意深く考えてみて下さい。 その結果、より高い階層でstateが"所有"されるべきであると判明することがよくあります。

つまり色々なところで使いまわしたい値はなるべく高い階層に置けということだ。
なのでMainIndex、つまりルーティングで切り替えられる各ページのトップに置くことに決めた。

コード重複の解決

上記方法で対応すると、各ページごとに同じコードを書かなければならなくなる。
なのでそれは各ページのRootはMainBaseRouteComponentという継承用クラスを作り、
全てのrouterから呼び出されるページ(MainIndex等)はこれを継承することにした。
これで全部のページでMainHeaderを配置してもいちいちhandlerメソッドを書かなくてよくなった。

Dumitter
https://alphabrend.sakura.ne.jp/dumitter/

Twitterを作る 第5回 フォロー


view_list [連載] Twitterを作る
第1回 Twitterを作る 第1回 概要
第2回 Twitterを作る 第2回 認証
第3回 Twitterを作る 第3回 投稿
第4回 Twitterを作る 第4回 コンポーネント構成考察
第5回 Twitterを作る 第5回 フォロー

だら@Crieit開発者

Crieitの開発者です。 主にLAMPで開発しているWebエンジニアです(在宅)。大体10年程。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel5, CakePHP3, JavaScript, RoR 趣味:Elixir, Phoenix, Node, Nuxt, Express, Vue等色々

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント