コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
96 likes76,084 views
2015/05/27にLINE社で行われた、Data Binding JS Nightでの発表内容です。
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
- 2. Hi :) • Kohei Asai • @axross • Software Engineer • React.js, express.js
- 3. コンポーネント指向
- 4. コンポーネント指向を推奨
- 5. ReactのにおけるComponent const SomeComponent = React.createClass({ render() { return ( <div> <span>{this.state.valueA}</span> <span>{this.props.valueB}</span> </div> ); }, }); 内部状態 外からの値 Component = DOMとJSのセット、UI部品
- 6. 値 -> DOM 変換器 • stateを使わず、propsを使うようにすれば、 Componentは「値 -> DOM 変換器」になる Componentprops DOM ( or Virtual DOM)
- 7. JSがDOMを支配する世界 • XHRとHistory APIでSPAが可能になった • すべての状態をJavaScriptが管理できる • JavaScriptがDOMを支配する世界
- 8. Data-bindedな「DOM」とは • データバインドされたすべてのDOMは、 JavaScriptの値によって吐き出される • ならば、DOMはコンパイル結果物 • データバインディングの嬉しさはここにある
- 10. コンポーネント指向 3つの法則 • 値をDOMに変換する装置であることを徹する • 再利用されることを前提にする • コンポーネントとそうでないものを明確に分 ける
- 12. 冪等性を守る • 通常は「値 -> DOM 変換器」であるはず • 受け入れた値が同じであれば、吐き出される DOMは常に同じはず • つまり、冪等性があるはず
- 13. 余計な仕事はさせない • それ以上の仕事をさせると、犠牲を生む • 必要以上なstateの保持・利用 • コンポーネントの中でXHR • = 冪等性を失う • = 疎結合ではなくなる
- 15. 副作用のある行為を含めない • 副作用のある行為はコンポーネントの外ですべき • XHR、Web Storageへのアクセスなど • FluxのStoreをsubscribeするなど • = 結果的に状態を持ってしまう • = 依存が増え、テストが困難になる
- 17. componentDidMountに注意 • componentDidMountで、writeな作用のある Flux Actionを呼んでいる • コンポーネントをmountしただけで、 他のコンポーネントに作用してしまう • = コンポーネントの副作用
- 18. 「どう使うか」は「使う時」に • コンポーネント自体の位置やサイズを指定す るCSSもよろしくない • それは「コンポーネントをどう使うか」と いう話であって、「コンポーネントの定義」 とはコンテキストが異なってしまう • = 別の場所にそのまま置けない
- 20. 「そうでないもの」も必要 • 冪等性のあるコンポーネントのみでクライア ントサイドのアプリケーションは作れない • 誰かが状態を持ったり、XHRする必要がある • 無理のないように設計するには、 「そうでないもの」も必要
- 21. テスト可能範囲を広げるために • Componentの親となる層は諦める • 状態を持ち、Flux Storeをsubscribeする • コンポーネントにpropsを渡す • ユニットテストが不可能な唯一の存在 • = 代わりに他のすべてのテストが容易になる
- 22. CSS設計へのアンサー
- 23. 単位を合わせる • 1 コンポーネント = 1 BEM Blockとかにする • ファイル名、セレクタ名も合わせる • 名前の競合が防がれる • 他のセレクタへの依存や影響がなくなる • = カジュアルに削除できる・再利用できる
- 24. まとめ
- 25. Reactとコンポーネント • Reactはコンポーネント指向 • コンポーネントは、値 -> DOM 変換器 として 機能する
- 26. コンポーネント指向 3つの法則 • 値 -> DOM 変換器 であることを徹する • 再利用されることを前提にする • コンポーネントとそうでないものを明確に分 ける
- 27. メリット • テスタブル • 冪等性と疎結合であることが担保される • カジュアルな変更・削除と再利用が可能 • 高速なPDCAサイクルに弱くない • CSS設計も助ける
- 28. みんなもReact使おう！
- 29. Thank you for listening :)