Tweet
Tweet

Slide 1

Slide 1 text

入門 React Hooks やぎちゃん：著 RCC 立命館コンピュータクラブ

Slide 2

Slide 2 text

プレゼンの対象者 React「完全に理解した」（チュートリアル終わった）人

Slide 3

Slide 3 text

Reactとは

Slide 4

Slide 4 text

Reactとは

Slide 5

Slide 5 text

Reactとは 状態（ステート、State）管理、 マウント/アンマウント…

Slide 6

Slide 6 text

Reactとは 状態（ステート、State）管理、 マウント/アンマウント… コイツ

Slide 7

Slide 7 text

副作用をどう扱う？

Slide 8

Slide 8 text

副作用をどう扱う？ →OOP 的にクラスで扱おう！

Slide 9

Slide 9 text

副作用をどう扱う？ Reactが出来た当時、JSのクラスって…

Slide 10

Slide 10 text

副作用をどう扱う？ Reactが出来た当時、JSのクラスって…

Slide 11

Slide 11 text

副作用をどう扱う？ クラスを綺麗に書きたい →createClass関数！

Slide 12

Slide 12 text

副作用をどう扱う？ ECMAScriptの仕様にclass記法が出来た！

Slide 13

Slide 13 text

ステートレスな コンポーネント

Slide 14

Slide 14 text

ステートレスなコンポーネント クラスじゃなくてもよくね？ →Stateless Functional Component

Slide 15

Slide 15 text

ステートレスなコンポーネント 本質を表すコードになった！

Slide 16

Slide 16 text

ステートレスなコンポーネント 本質を表すコードになった！

Slide 17

Slide 17 text

関数コンポーネントでも 状態管理がしたい！

Slide 18

Slide 18 text

関数コンポーネントでも(ry 状態を持ったコンポーネントの例：カウンタ

Slide 19

Slide 19 text

classで書いてみた

Slide 20

Slide 20 text

関数コンポーネントでも(ry 高階コンポーネント（Higher Oder Component、HOC）

Slide 21

Slide 21 text

関数コンポーネントでも(ry 高階コンポーネント（Higher Oder Component、HOC） 副作用をHOCに分離

Slide 22

Slide 22 text

関数コンポーネントでも(ry Recompose：HOCを集めたライブラリ

Slide 23

Slide 23 text

関数コンポーネントでも(ry HOCの なところ： HOCを１つ通す（stateを１つ作る、ライフサイクルを設定する …）ごとにコンポーネントが増える →DevToolsで悲惨なことに →パフォーマンス的にも心配

Slide 24

Slide 24 text

入門 React Hooks

Slide 25

Slide 25 text

入門 React Hooks Hooks を使うと…？

Slide 26

Slide 26 text

入門 React Hooks Hooks を使うと…？

Slide 27

Slide 27 text

Reactとは 状態（ステート、State）管理、 マウント/アンマウント… コイツ

Slide 28

Slide 28 text

入門 React Hooks Hooks を使うと…？ 状態（ステート、State）管理、 マウント/アンマウント…

Slide 29

Slide 29 text

入門 React Hooks Hooks の仕組み ・関数 ・Reactがどのコンポーネントから 何回目に呼び出されたかを認識

Slide 30

Slide 30 text

入門 React Hooks Hooks at a Glance（訳：ひと目でわかるHooks） → https://reactjs.org/docs/hooks-overview.html とりあえず読んで

Slide 31

Slide 31 text

入門 React Hooks Hooks を作ってみよう！

Slide 32

Slide 32 text

入門 React Hooks Hooks を作ってみよう！ ポイント：既存のHooksなどを組み合わせて関数を作る

Slide 33

Slide 33 text

補足 ReduxもHooksを使ったAPIができたよ！ →https://react-redux.js.org/next/api/hooks

Slide 34

Slide 34 text

まとめ • Reactは • 副作用を扱うためにいろいろしてきた • Class、HOCs、などなど… • Hooksはその１つ • Hooksはより見やすくなった！ Hooks使っていこう！

Slide 35

Slide 35 text

読んで！ 作って理解するReact Hooks - Qiita React HooksのuseStateがどういう原理で実現されてるのかさっぱ りわからなかったので調べてみた Under the hood of React’s hooks system – The Guild – Medium

Slide 36

Slide 36 text

ありがとう ございました！ FIN