Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React で Stateless Functional Component の書き方を盛大に間違えていた話

takf
December 06, 2018

React で Stateless Functional Component の書き方を盛大に間違えていた話

takf

December 06, 2018
Tweet

More Decks by takf

Other Decks in Programming

Transcript

  1. React で Stateless Functional Component の書き方を盛大に間違えていた話 Takeru Furuichi Meguro.es 2018.12.06

  2. 発表者について 古市武尊 (Twitter:@takfjp) インフォ・ラウンジ株式会社 (横浜市都筑区) 所属 地方自治体向けのWEBアプリ開発・オープンデータ活用 の仕事をしています React /

    Node.js / Firebase /最近は主にPHP(Laravel) MVCの設計に苦戦中 今年の目標:引っ越し
  3. Stateless Functional Component (現: Functional Component) const SomethingComponent = (props)

    => ( <div>Hello, {props.name}</div> )
  4. 転職後初のプロジェクト フルスクラッチで業務用SPAを作っていた React、Redux についてドキュメントを読みながら 独学>実装>また独学…の繰り返し 今日は初心者時代に書いていた最悪なコードを共有して供養します

  5. 当時の私 コンポーネントは出来るだけ Stateless に保たないとだめなのかー ※色んなドキュメントを読んで誤った理解をしていた

  6. こんなコンポーネントがでてきた ・5ヶ国語を入力するtextbox があります ・プルダウンで定型文を選択できます ・どれか一つで定型文を選ぶと5ヶ国語ぶん自動的に  textboxに入力されます ・最後に「送信」ボタンで5つぶんメッセージ送信

  7. None
  8. 当時の私 Textbox の見た目は同じだし、Stateless で実装するかあ

  9. ステートレスでいい例 const SomethingComponent = (props) => ( <div> <p>こんにちは、{props.name}</p> <p>Hello,

    {props.name}</p> <p>¡Hola!, {props.name}</p> <p>你好, {props.name}</p> <p>Здравствуйте, {props.name}</p> </div> ) //自らで入力インタフェースを持たない。プレゼンテーションにしか影響し ない。
  10. このコンポーネントに必要なもの ・入力するテキスト ( State ) ・入力値をViewに反映するHandler ・プルダウンの選択を全てのTextboxに通知するHandler ・選択に応じて入力値を定型文に書き換えるHandler ・定型文 (State)

  11. 無視した結果 const MessageBox = ({props, handler, langCode}) => ( //…//

    ) ?
  12. なにがダメか ・Statelessと言いつつ変更内容を送信するhandlerを親から受け継いでいる  eventに結びつければ親から引っ張ってきた handlerは発動するけど・・・ ・書き方だけ Stateless にしようとしているだけ!!!  -> 共通なのは見た目だけ。役割はそれぞれの Textbox

    で独立している。
  13. さらに最悪なコードを書いていた 自分で書いていて何も疑問に思わなかったのか・・・ const props = Object.assign({}, this.props, this.state) //ローカルステートとReduxのstore上のstateをごっちゃまぜにしている・・・ const

    MessageBox = ({props, handler, langCode}) => ( //…// )
  14. なにもわかっていなかった ・ReduxのStoreで管理するState、ローカルのStateの分け方 ・Redux Dev Toolがメモリリークしまくって落ちた

  15. おとなしく Class Component で書き直しました。 ・入力内容はそれぞれのローカルステートで保つ ・親の Class Component から言語コードだけ注入を受け付ける (例)

    <MessageBox langCode={“ja”} /> <MessageBox langCode={“en”} /> <MessageBox langCode={“ch”} /> <MessageBox langCode={“es”} /> <MessageBox langCode={“ru”} /> ・定型文が選ばれたら action を発行 -> 他の textbox に対応する文を自動挿入
  16. おとなしく Class Component で書き直しました。 ・定型文、言語コードを Redux の Store に持つ (例)

    templates : { langCode : [“ja”, ”en”], texts: [“おはよう”, “こんにちは”, “さようなら”], [“Good Morning”, “Hello”, “Bye”] } ・定型文が選ばれたら action を発行 -> 他の textbox に対応する文を自動挿入
  17. Thank you!