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

Reactの新機能を紹介

kurosame
November 09, 2018

 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

kurosame

November 09, 2018
Tweet

More Decks by kurosame

Other Decks in Programming

Transcript

  1. Context API【やばさレベル ★】 - v16.3 から追加された機能 - React のみでいい感じの State

    管理ができる - State 管理に関して Redux とは別の選択肢ができただけと 思って良い
  2. Context API 考察 - Redux でやってたことはある程度、実現できそう - 小規模システムであれば Context API

    は良いが、大規模シス テムだと辛そう - Redux 覚えるより Context API の方が遥かに簡単
  3. 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
  4. なぜこんなに盛り上がっているのか - React Hooks 使って書こう! - 今まで Class Component で書かれた

    React や エコシステ ムのライブラリを全て Hooks で書き直すのか - React Hooks に対応しなかったライブラリは取り残される 感。。 など
  5. 無くなる可能性があるもの2 - Class Component JS から class が消える Function Component

    になる - Stateless Component Function Component に置き換わる
  6. 大事なこと - 過去 Class Component で書かれたComponent 全てを Hooks で書き直すという話は無い -

    先程のコード例にもあったように Class Component と Function Component を共存させることは可能 - つまり、Hooks へは段階的に移行可能
  7. 大事なこと2 - Hooks を利用した Function Component にすることで、再利 用しやすく分離しやすい Component を作れる

    - React を使う上で Class とか関数とか HOC とか使い分けなく ても、関数だけでいける https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889
  8. - Context API React で規模の小さいシステムを作る際に検討 - React Hooks まだ提案レベルでこの先仕様は大きく変わる可能性が高いの で、プロダクション導入はまだ先

    ただし、React 及び エコシステムは Hooks で書き直される可 能性が高いので、情報収集くらいはしておいた方が良い