More than 1 year has passed since last update.

新・日本一わかりやすいReact入門の学習ノート

Last updated at 2023-01-28Posted at 2023-01-27

このページについて

youtubeの「新・日本一わかりやすいReact入門」を見た際の記録用のメモ。
新・日本一わかりやすいReact入門【基礎編】 - YouTube

React.Fragmentとは、階層構造にするために空タグで囲むもの。

create-react-appとは、babelや、webpackの設定をよしなにやってくれるコマンド。

クラスコンポーネントはほとんど使われない。propsを呼び出すときはthisを使用する。
昔は、クラスコンポーネントでしかstate,ライフサイクルを使用できなかったため、主に使われていた。
関数コンポーネントを中心に学習すれば良い。React Hooksの登場により、クラスコンポーネントと同じことができるようになった。
関数コンポーネントは、以下、どちらでも定義可能。

function 関数名
const 関数名

※react version 17以降は、import react from React の記述は不要。

const [現在の状態, 更新関数] = useState(初期値)

更新関数(新しい値)

stateをpropsとして渡すことが多い。
propsに関数を渡す際に、コールバック関数か、関数自体を渡す。
渡す際に関数を実行しない。
✖️メソッド名() ← ()をつけると呼び出されたタイミングで実行される。

引数を使って更新する
prevStateを活用する
prevStateとは、更新前のstate
Reactの公式の書き方として、prevStateを使用せずに、現在のstateに変更を加える書き方をしているがこの書き方はよくない。
→ 現在のstateが更新されるまでタイムラグがあるため。

useEffectは、ライフサイクルに応じた処理を行いたい場合に使用する。
ライフサイクルとは、コンポーネントが生まれたから破棄されるまでの時間の流れ。

Mounting:コンポーネントが初回、画面にレンダリングされるまでの期間
初期化　→ レンダリング　→ マウント後の初回の処理(←useEffectはこのタイミングで走る)
Updating:コンポーネントが変更されるたびに発生する、変更される期間
レンダリング　→ 更新後の処理
Unmounting:コンポーネントが破棄される期間
アンマウント前の処理

副作用(effect)とは、レンダリングによって引き起こされる処理のこと。
レンダリングされるたびに呼び出したい処理をuseEffectに記載する。

useEffectの第二引数(dependencies)の書き方

クリーンアップ
コンポーネント内で外部データベースを購読したい場合は、useEffect内で購読処理を呼び出す。
→必要無くなったらクリーンアップ関数を使って掃除する。
←購読しっぱなしだと、メモリリークにつながるため。

useEffectのユースケース
APIやデータベースから非同期通信でデータを取得する(fetch)ときは、useEffectの中で行う。
データをただ取得するときはget。
ネットワーク越しに通信してデータを取ってきて戻ってくる場合は、fetchという単語を使う。

※テンプレートリテラル
バッククオート内で、${}内は、javascriptを記述できる。

非同期処理は、実行を待たない。
メリット：ユーザーを待たせない。ユーザーに別の操作を許可する。
デメリット：実行完了までデータが存在しないのでそこの制御が難しい。
→非同期処理の実行完了を制御するにはどうしたらいい？
Promiseを使用する。
同期処理は、別タスクの実行完了を待つ。
その間自分のタスクは中断する。
Promiseで完了を待つ方法
pending:初期状態
fullfilled:処理が成功して完了
rejected:処理が失敗して完了
async/awaitで完了を待つ方法
非同期処理を伴う関数を定義する際にasyncをつける。
その関数の実行の際にawaitをつける。

Reactのパフォーマンスチューニング方法

const ids = useMemo(() => {
}, [amount])  ←このamountの値が変化した場合だけ再計算が走る。