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

Reactハンズオンラーニングを読んだので感想を語る

あけの
September 08, 2022

 Reactハンズオンラーニングを読んだので感想を語る

あけの

September 08, 2022
Tweet

More Decks by あけの

Other Decks in Programming

Transcript

  1. 概要 About this talk X React(Next.js)歴10ヶ月くらd X 体系的な知識を仕入れない状態でやってき$ X 一通り読んで気になった部分を話す(積読だった)

    X 関数型プログラミン’ X フッ„ X パフォーマン€ X データ取t X Suspense https://www.oreilly.co.jp/books/9784873119380/ Alex Banks、Eve Porcello 著、宮崎 空 訳 Reactハンズオンラーニング 第2版 オライリー・ジャパン発行 ISBN: 978-4-87311-938-0
  2. フック ステートを管理して、値をバケツリレーで各コンポーネントに配るのが基本 ステートの管理に使えるフックなるものがある https://github.com/oreilly-japan/learning-react-2e-ja/tree/master/chapter-06/6.1/6.1.1 ステートの変更が再描画をトリガーするという認識は持った - useState - useReducer -

    useContext Formのcontrolled/uncontrolled 前者はReactでステート管理出来る分多少重い 後者はRefを用いてDOMを参照する必要がある https://github.com/oreilly-japan/learning-react-2e-ja/tree/master/chapter-06/6.3/6.3.1
  3. フック カスタムフックの設計 https://github.com/oreilly-japan/learning-react-2e-ja/tree/master/chapter-06/6.3/6.3.3 どんどん宣言的になっていくので、そちらを向いて作るのが良さそう 関心の分離を進めている フックの種類 useLayoutEffect...? → render後paint前に呼ばれる(useEffectとは違いレンダリングをブロックする) useEffect

    → 描画の副作用という認識を持つ https://github.com/oreilly-japan/learning-react-2e-ja/tree/master/chapter-07/7.1/7.1.1 render内ではUI構築に関する処理のみが書かれているべき console.logをuseEffect内で書くという発想はなかった →ログを非同期的に出力するカスタムフックになるのか…?
  4. データ取得 localStorage + FetchAPI + useEffectでの取得をしている https://github.com/oreilly-japan/learning-react-2e-ja/tree/master/chapter-08/8.3 データの管理が複雑なのでデータ取得ライブラリの有用性がわかる UIの構築に必要な戻り値を持つフックの提供があると楽(data,error,loading,etc...) 末端のコンポーネントでのAPI呼び出し

    https://github.com/oreilly-japan/learning-react-2e-ja/tree/master/chapter-08/8.5/8.5.2 親コンポーネントでのデータ取得から分配するパターンを取ることが多いので 表現の違いが見える unmountされた際の検出とリクエストのキャンセル https://github.com/oreilly-japan/learning-react-2e-ja/tree/master/chapter-08/8.5/8.5.3 →データ取得を自前で実装することの面倒さを感じる
  5. Suspense ErrorBoundaryの関数コンポーネント or フックが欲しい https://github.com/oreilly-japan/learning-react-2e-ja/tree/master/chapter-09/9.u e React.lazyを使ったコンポーネントの遅延読み込V e Promiseを返す非同期処理 データ取得ライブラリと対応している

    https://github.com/oreilly-japan/learning-react-2e-ja/tree/master/chapter-09/9.3/9.3.3 loading → Suspense.Fallback error → ErrorBoundary.Fallback Promise(非同期処理)の状態に合わせてどうするかを明確に書ける 異常系の処理を正常系の処理をしているコンポーネントの外に追い出せるのが良い
  6. まとめ 本を眺めた結果、Reactは - カスタムフックをどう設計するか - 1つのフックで多くのことをせずに複数のフックに分割する - 既存のライブラリがどういうフックを提供しているかから学ぶ - TypeScript力が試される

    - State・Promiseをどう管理するか - Server/Global/Localの切り分けと再描画の管理 - 今のところ前2つはライブラリ依存なので、 LocalState以外を意識することがない に尽きる。(現在の自分の見える範囲) 書く時もこの辺で迷ってることが多く…