ozaki25’s diary

「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で扱う状態のライフサイクル

@as_masaさん

Storeの設計

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

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

全部載せ系
- ページ遷移しない
- タイムライン系
ページ遷移系
- ページ遷移する
- 管理サイトECサイト

全部載せ系

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

ページ遷移系

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

ローカルステート使うか

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

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

@sonatardさん

ReactHooks

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

カスタムフックの例

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

カスタムフック

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

nikgraf.github.io

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

fff_komatsuさん

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

コンポーネント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の代わり