Reactの新機能を紹介

ReactのContextAPIとHooksを簡単に実装して紹介

スライド内のリンク
Context API
https://kurosame-th.hatenadiary.com/entry/2018/11/05/193908

React Hooks
https://kurosame-th.hatenadiary.com/entry/2018/11/07/193117

Transcript

1. React の新機能を紹介
   2018
   年
   11
   月
   9
   日
   

   View Slide

2. React 会という勉強会に参加してきました
   https://react-kai.connpass.com/event/102286
   

   View Slide

3. React の新機能についての話が多かった
   のですが、今回は 2 つやばいやつを紹介
   します
   

   View Slide

4. Context API【やばさレベル ★】
   - v16.3 から追加された機能
   - React のみでいい感じの State 管理ができる
   - State 管理に関して Redux とは別の選択肢ができただけと
   思って良い
   

   View Slide

5. State の流れを簡単におさらい
   【前提】
   ・ファイル名やラジオボタンの状態（State）は保
   持しておきたい
   ・ファイル名はモーダル１とモーダル２で使いま
   わしたい
   

   View Slide

6. ファイル名はどのコンポーネントで持つの
   が良いでしょうか？
   

   View Slide

7. GrandChild コンポーネントに持つ場合
   お互いのコンポーネントを把握しているのは、
   Parent のみ
   よって、Parent コンポーネントを介してファイル
   名を渡す必要がある
   

   View Slide

8. Parent コンポーネントに持つ場合
   Parent コンポーネントにモーダ
   ル１とモーダル２で使うファイル
   名を持つ設計がベスト！
   

   View Slide

9. Context API を使うとどうなるのか
   

   View Slide

10. こうなります
    

    View Slide

11. 簡単なコードを書きました
    https://kurosame-th.hatenadiary.com/entry/2018/11/05/193908
    

    View Slide

12. Context API 考察
    - Redux でやってたことはある程度、実現できそう
    - 小規模システムであれば Context API は良いが、大規模シス
    テムだと辛そう
    - Redux 覚えるより Context API の方が遥かに簡単
    

    View Slide

13. React Hooks【やばさレベル ★★★★★★★★】
    - Class Component ではなく、Function Component になる
    - Function Component が State の操作やライフサイクル関数
    を持てる
    先程のContext API の例だと Parent が Class Component で Child と Grandchild が Function
    Component です
    https://kurosame-th.hatenadiary.com/entry/2018/11/05/193908
    

    View Slide

14. React Hooks かなり盛り上がってる！
    https://github.com/reactjs/rfcs/pull/68
    

    View Slide

15. React のエコシステム達も盛り上がってる！
    

    View Slide

16. なぜこんなに盛り上がっているのか
    - React Hooks 使って書こう！
    - 今まで Class Component で書かれた React や エコシステ
    ムのライブラリを全て Hooks で書き直すのか
    - React Hooks に対応しなかったライブラリは取り残される
    感。。
    など
    

    View Slide

17. 簡単なコードを書きました
    https://kurosame-th.hatenadiary.com/entry/2018/11/07/193117
    

    View Slide

18. 無くなる可能性があるもの
    - HOC
    高階関数のコンポーネント版みたいな
    - Recompose
    HOC を作るためのUtility
    

    View Slide

19. 無くなる可能性があるもの２
    - Class Component
    JS から class が消える
    Function Component になる
    - Stateless Component
    Function Component に置き換わる
    

    View Slide

20. 大事なこと
    - 過去 Class Component で書かれたComponent 全てを
    Hooks で書き直すという話は無い
    - 先程のコード例にもあったように Class Component と
    Function Component を共存させることは可能
    - つまり、Hooks へは段階的に移行可能
    

    View Slide

21. 大事なこと２
    - Hooks を利用した Function Component にすることで、再利
    用しやすく分離しやすい Component を作れる
    - React を使う上で Class とか関数とか HOC とか使い分けなく
    ても、関数だけでいける
    https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889
    

    View Slide

22. その他も新機能が色々追加されます
    - Suspense
    - Time Slicing
    etc...
    React コンポーネントの非同期レンダリング（React Fiber）が採用
    されてから、今まで出来なかったことが色々出来るようになってき
    た！
    

    View Slide

23. 今やるべきこと
    

    View Slide

24. - Context API
    React で規模の小さいシステムを作る際に検討
    - React Hooks
    まだ提案レベルでこの先仕様は大きく変わる可能性が高いの
    で、プロダクション導入はまだ先
    ただし、React 及び エコシステムは Hooks で書き直される可
    能性が高いので、情報収集くらいはしておいた方が良い
    

    View Slide

25. さいごに
    

    View Slide

26. 「うちは Vue.js なので関係ないですねー」
    というあなた！
    

    View Slide

27. 残念なお知らせです
    

    View Slide

28. https://github.com/yyx990803/vue-hooks
    

    View Slide

29. Vue.js 作者の Evan 氏が実験的に
    React Hooks を Vue.js で実装していま
    す
    

    View Slide

30. Vue.js は React の良い機能は（少しアレ
    ンジして）採用すると思うので、将来プロ
    ダクションで使われだす前に色々 Hooks
    周りを知っておくと良いと思います
    

    View Slide