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 日
2. React 会という勉強会に参加してきました https://react-kai.connpass.com/event/102286
3. React の新機能についての話が多かった のですが、今回は 2 つやばいやつを紹介 します
4. Context API【やばさレベル ★】 - v16.3 から追加された機能 - React のみでいい感じの State 管理ができる - State 管理に関して Redux とは別の選択肢ができただけと 思って良い
5. State の流れを簡単におさらい 【前提】 ・ファイル名やラジオボタンの状態（State）は保 持しておきたい ・ファイル名はモーダル１とモーダル２で使いま わしたい
6. ファイル名はどのコンポーネントで持つの が良いでしょうか？
7. GrandChild コンポーネントに持つ場合 お互いのコンポーネントを把握しているのは、 Parent のみ よって、Parent コンポーネントを介してファイル 名を渡す必要がある
8. Parent コンポーネントに持つ場合 Parent コンポーネントにモーダ ル１とモーダル２で使うファイル 名を持つ設計がベスト！
9. Context API を使うとどうなるのか
10. こうなります
11. 簡単なコードを書きました https://kurosame-th.hatenadiary.com/entry/2018/11/05/193908
12. Context API 考察 - Redux でやってたことはある程度、実現できそう - 小規模システムであれば Context API は良いが、大規模シス テムだと辛そう - Redux 覚えるより Context API の方が遥かに簡単
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
14. React Hooks かなり盛り上がってる！ https://github.com/reactjs/rfcs/pull/68
15. React のエコシステム達も盛り上がってる！
16. なぜこんなに盛り上がっているのか - React Hooks 使って書こう！ - 今まで Class Component で書かれた React や エコシステ ムのライブラリを全て Hooks で書き直すのか - React Hooks に対応しなかったライブラリは取り残される 感。。 など
17. 簡単なコードを書きました https://kurosame-th.hatenadiary.com/entry/2018/11/07/193117
18. 無くなる可能性があるもの - HOC 高階関数のコンポーネント版みたいな - Recompose HOC を作るためのUtility
19. 無くなる可能性があるもの２ - Class Component JS から class が消える Function Component になる - Stateless Component Function Component に置き換わる
20. 大事なこと - 過去 Class Component で書かれたComponent 全てを Hooks で書き直すという話は無い - 先程のコード例にもあったように Class Component と Function Component を共存させることは可能 - つまり、Hooks へは段階的に移行可能
21. 大事なこと２ - Hooks を利用した Function Component にすることで、再利 用しやすく分離しやすい Component を作れる - React を使う上で Class とか関数とか HOC とか使い分けなく ても、関数だけでいける https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889
22. その他も新機能が色々追加されます - Suspense - Time Slicing etc... React コンポーネントの非同期レンダリング（React Fiber）が採用 されてから、今まで出来なかったことが色々出来るようになってき た！
23. 今やるべきこと
24. - Context API React で規模の小さいシステムを作る際に検討 - React Hooks まだ提案レベルでこの先仕様は大きく変わる可能性が高いの で、プロダクション導入はまだ先 ただし、React 及び エコシステムは Hooks で書き直される可 能性が高いので、情報収集くらいはしておいた方が良い
25. さいごに
26. 「うちは Vue.js なので関係ないですねー」 というあなた！
27. 残念なお知らせです
28. https://github.com/yyx990803/vue-hooks
29. Vue.js 作者の Evan 氏が実験的に React Hooks を Vue.js で実装していま す
30. Vue.js は React の良い機能は（少しアレ ンジして）採用すると思うので、将来プロ ダクションで使われだす前に色々 Hooks 周りを知っておくと良いと思います