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

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つぶんメッセージ送信
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!