「React.js meetup #8 初心者歓迎 LT会」に参加してきました

  • React.js meetup #8 初心者歓迎 LT会に参加してきました。

reactjs-meetup.connpass.com

タイトル 発表者
Gatsby紹介&Gatsbyのビルドをザックリ理解 kon_shouさん
Storeで扱う状態のライフサイクル @as_masaさん
React Hooks - カスタムフックとカプセル化 @sonatardさん
Reactから始めるリプレイス生活 fff_komatsuさん
connectの要らないreact-redux @natural_clarさん

Gatsby紹介&Gatsbyのビルドをザックリ理解

  • kon_shouさん

Gatsbyとは

  • Reactで書ける静的サイトジェネレーターe
  • viewはReact
  • データやりとりはGraphQL
  • Reactの公式サイトもGatsbyでできてる
  • starterkitが豊富

www.gatsbyjs.org

Storeで扱う状態のライフサイクル

Storeの設計

  • 1Store=1model?1Store=複数model?
  • ローカルステート使う?

アプリ特性によって考える

  • 全部載せ系
    • ページ遷移しない
    • タイムライン系
  • ページ遷移系

全部載せ系

  • アプリ起動から終了までのライフサイクルしかない

ページ遷移系

  • アプリ起動から終了までのライフサイクル
  • ページを表示してから別ページに遷移するまでのライフサイクル
  • ページごとの型を定義できる
    • Topページ型とかUserページ型とか

ローカルステート使うか

  • 同じライフサイクルで管理したいのでStoreで管理したい

React Hooks - カスタムフックとカプセル化

  • @sonatardさん

ReactHooks

  • React16.8で追加された
  • statteなどの機能をclassを使わずに書ける
  • useXxxというものが公式で10個公開されている
  • custom hookとして独自のものも作れる

カスタムフックの例

  • ロジックをカスタムフックに隠蔽することでViewをすっきりさせることができる
  • 可読性向上
  • 再利用性向上

カスタムフック

  • いろいろ公開されているから作る前に検索すると見つかるかも

github.com

github.com

nikgraf.github.io

Reactから始めるリプレイス生活

意図せぬコンポーネントの破壊

  • コンポーネントAを変更したらコンポーネントAに依存するコンポーネントBが知らないうちに壊れてた
    • Storybookを使ってればStoryShotsがお手軽で便利
  • styled-componentsのcreateGlobalStyleで意図せず壊れた
    • divタグにstyle定義してそれで囲うことでスコープを狭めた
    • 既存コードに影響ないようにできた

connectの要らないreact-redux

  • @natural_clarさん

react-redux

  • reactでreduxを使うためのラッパー

従来の使い方

  • mapStateToPropsとかmapDispatchToProps使ってconnectする

react-redux v7.1

  • hooksを使ったSPI
    • useSelector
    • useDispatch
  • これらをつかうとconnectを使わなくてよくなる

useSelector

  • 特定のselectorを使って値をとってくるhooks
  • mapStateToPropsの代わり
  • selectorの結果が変更されたときだけrerenderされる

useDispatch

  • 今までのdispatchと同じ感じ
  • mapDispatchToPropsの代わり