入門 React Hooks / Introduction of React Hooks

スライド中のリンク

Hooks at a Glance – React: https://reactjs.org/docs/hooks-overview.html
Hooks · React Redux : https://react-redux.js.org/next/api/hooks
作って理解するReact Hooks - Qiita : https://qiita.com/uhyo/items/27a83d9044945034c4da
React HooksのuseStateがどういう原理で実現されてるのかさっぱりわからなかったので調べてみた : https://sbfl.net/blog/2019/02/09/react-hooks-usestate/
Under the hood of React’s hooks system - The Guild - Medium : https://medium.com/the-guild/under-the-hood-of-reacts-hooks-system-eb59638c9dba

Transcript

1. 入門 React Hooks やぎちゃん：著 RCC 立命館コンピュータクラブ
2. プレゼンの対象者 React「完全に理解した」（チュートリアル終わった）人
3. Reactとは
4. Reactとは
5. Reactとは 状態（ステート、State）管理、 マウント/アンマウント…
6. Reactとは 状態（ステート、State）管理、 マウント/アンマウント… コイツ
7. 副作用をどう扱う？
8. 副作用をどう扱う？ →OOP 的にクラスで扱おう！
9. 副作用をどう扱う？ Reactが出来た当時、JSのクラスって…
10. 副作用をどう扱う？ Reactが出来た当時、JSのクラスって…
11. 副作用をどう扱う？ クラスを綺麗に書きたい →createClass関数！
12. 副作用をどう扱う？ ECMAScriptの仕様にclass記法が出来た！
13. ステートレスな コンポーネント
14. ステートレスなコンポーネント クラスじゃなくてもよくね？ →Stateless Functional Component
15. ステートレスなコンポーネント 本質を表すコードになった！
16. ステートレスなコンポーネント 本質を表すコードになった！
17. 関数コンポーネントでも 状態管理がしたい！
18. 関数コンポーネントでも(ry 状態を持ったコンポーネントの例：カウンタ
19. classで書いてみた
20. 関数コンポーネントでも(ry 高階コンポーネント（Higher Oder Component、HOC）
21. 関数コンポーネントでも(ry 高階コンポーネント（Higher Oder Component、HOC） 副作用をHOCに分離
22. 関数コンポーネントでも(ry Recompose：HOCを集めたライブラリ
23. 関数コンポーネントでも(ry HOCの なところ： HOCを１つ通す（stateを１つ作る、ライフサイクルを設定する …）ごとにコンポーネントが増える →DevToolsで悲惨なことに →パフォーマンス的にも心配
24. 入門 React Hooks
25. 入門 React Hooks Hooks を使うと…？
26. 入門 React Hooks Hooks を使うと…？
27. Reactとは 状態（ステート、State）管理、 マウント/アンマウント… コイツ
28. 入門 React Hooks Hooks を使うと…？ 状態（ステート、State）管理、 マウント/アンマウント…
29. 入門 React Hooks Hooks の仕組み ・関数 ・Reactがどのコンポーネントから 何回目に呼び出されたかを認識
30. 入門 React Hooks Hooks at a Glance（訳：ひと目でわかるHooks） → https://reactjs.org/docs/hooks-overview.html とりあえず読んで
31. 入門 React Hooks Hooks を作ってみよう！
32. 入門 React Hooks Hooks を作ってみよう！ ポイント：既存のHooksなどを組み合わせて関数を作る
33. 補足 ReduxもHooksを使ったAPIができたよ！ →https://react-redux.js.org/next/api/hooks
34. まとめ • Reactは • 副作用を扱うためにいろいろしてきた • Class、HOCs、などなど… • Hooksはその１つ • Hooksはより見やすくなった！ Hooks使っていこう！
35. 読んで！ 作って理解するReact Hooks - Qiita React HooksのuseStateがどういう原理で実現されてるのかさっぱ りわからなかったので調べてみた Under the hood of React’s hooks system – The Guild – Medium
36. ありがとう ございました！ FIN