React Hooks でクラスを書き換える
React で無限スクロールを自力実装したくて調べたら React Hooks を使っているサンプルが出てきたので、まず React Hooks を習得するためにクラスを書き換える。
開発環境
- node v16.6.0
- npm v7.19.1
- react v17.0.2
本文
ソースコードは 先週の記事 のコードを使い、下記の Main というクラスを React Hooks を使って書き換えることにする。
ついでに「次へ」ボタンを押下したときページングするのではなく、既に画面上に表示されているものの下に新しく読み込んだものを追加するようにする。
|
|
ステートフックへの書き換え
React 公式サイトの ステートフックの利用法 を見て Main クラスを書き換えていく。
一旦データの取得・更新処理は除外し、
- useState を import
- class Main を function Main に変更
- state の宣言を ステートフックに変更
とすると下記のようになる。
|
|
データの取得処理を書いていないのでレンダリングされる画面は真っ白だが、まずこれでコンパイルは通る状態になる。
クラスを使っている場合は this.state.items のようにして state にアクセスしなければならないが、ステートフックを使っている場合は単に items と書くと state にアクセスできる。
副作用フックへの書き換え
次にデータの取得周りを副作用フックに書き換える。
副作用フックの利用法 を参考に
- useEffect を import
- useEffect 内にデータ読み込み処理を追加
- loadNext という state を追加し、loadNext が true の場合のみデータ読み込みを行うようにする
という書き換えを行った。
loadNext という state を追加したのは、依存している state の内のいずれかが変更されると useEffect が発火してしまう動きとなり、無限に読み込みが発生してエラーになったからである。
(つまり items を useEffect 内で更新すると、それによって再度 useEffect が発火してしまう。)
また async 関数を useEffect 内に定義する書き方については、間違った書き方をしたら React のコンパイラが書き方を教えてくれたのでそれに従った。たぶんこの書き方で正しい。
|
|
これで画面上には最初の 5 件のデータが出て、「次へ」ボタンを押すと “clicked!” というアラートが表示される状態となった。
「次へ」ボタン押下時の処理
最後に「次へ」ボタン押下時の処理だが、先に述べたように useEffect は依存している state が更新されると発火されるので、「次へ」ボタン押下時に loadNext を true に更新することによって次のデータを読み込める。
|
|
これで「次へ」ボタンを押下すると続きのデータが画面に追加されるようになる。
今回はここまで。