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

# このページについて
youtubeの「新・日本一わかりやすいReact入門」を見た際の記録用のメモ。
[新・日本一わかりやすいReact入門【基礎編】 \- YouTube](https://www.youtube.com/playlist?list=PLX8Rsrpnn3IWPoM7-1YPDksRRkamRY25k)

# [\#02 新・日本一わかりやすいReact入門【基礎編】JSXの記法 \- YouTube](https://www.youtube.com/watch?v=gLbTluYSb_U)
React.Fragmentとは、階層構造にするために空タグで囲むもの。

# [\#03 新・日本一わかりやすいReact入門【基礎編】create\-react\-appで環境構築 \- YouTube](https://www.youtube.com/watch?v=Ym4If5W9SS0)
create-react-appとは、babelや、webpackの設定をよしなにやってくれるコマンド。

# [\#04 新・日本一わかりやすいReact入門【基礎編】コンポーネントとprops \- YouTube](https://www.youtube.com/watch?v=Q-df0QgZuhE)
* クラスコンポーネントはほとんど使われない。propsを呼び出すときはthisを使用する。
昔は、クラスコンポーネントでしかstate,ライフサイクルを使用できなかったため、主に使われていた。
* 関数コンポーネントを中心に学習すれば良い。React Hooksの登場により、クラスコンポーネントと同じことができるようになった。
関数コンポーネントは、以下、どちらでも定義可能。
```
function 関数名
const 関数名
```
※react version 17以降は、import react from React の記述は不要。

# [\#05 新・日本一わかりやすいReact入門【基礎編】コンポーネントのimportとexport \- YouTube](https://www.youtube.com/watch?v=Sex6Vc-NJEk)
[JavaScript モジュール \- JavaScript \| MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Modules#%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E3%81%AE%E8%83%8C%E6%99%AF)
* default export
defaultという名前でexportした上で、定義した名前で再定義している。
* 名前付きexport
reactではエントリポイントでよく使用する。
エントリポイントでは、別名exportも併用して、名前が被らないようにしている。
* 名前付きimport
1ファイルから複数コンポーネント呼び出す。

# [\#06 新・日本一わかりやすいReact入門【基礎編】コンポーネントの状態管理 \- YouTube](https://www.youtube.com/watch?v=dTghhYtvPek)
```
const [現在の状態, 更新関数] = useState(初期値)

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

# [\#07 新・日本一わかりやすいReact入門【基礎編】頻出するuseStateのケース3選 \- YouTube](https://www.youtube.com/watch?v=7MzVcLAtl8g)
* 引数を使って更新する
* prevStateを活用する
prevStateとは、更新前のstate
Reactの公式の書き方として、prevStateを使用せずに、現在のstateに変更を加える書き方をしているがこの書き方はよくない。
→ 現在のstateが更新されるまでタイムラグがあるため。

# [\#08 新・日本一わかりやすいReact入門【基礎編】ライフサイクルと副作用を理解しよう \- YouTube](https://www.youtube.com/watch?v=f8iXdpbvvH8)
useEffectは、ライフサイクルに応じた処理を行いたい場合に使用する。
ライフサイクルとは、コンポーネントが生まれたから破棄されるまでの時間の流れ。
* Mounting:コンポーネントが初回、画面にレンダリングされるまでの期間
初期化　→ レンダリング　→ マウント後の初回の処理(←useEffectはこのタイミングで走る)
* Updating:コンポーネントが変更されるたびに発生する、変更される期間
レンダリング　→ 更新後の処理
* Unmounting:コンポーネントが破棄される期間
アンマウント前の処理

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

useEffectの第二引数(dependencies)の書き方
* 初回レンダリング後のみ実行したい場合：, deps: []
* countが変更される度に実行したい場合：, deps: [count]

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

# [\#09 新・日本一わかりやすいReact入門【基礎編】useEffect内でAPIを呼び出そう \- YouTube](https://www.youtube.com/watch?v=Ejr2vj527j4)
useEffectのユースケース
APIやデータベースから非同期通信でデータを取得する(fetch)ときは、useEffectの中で行う。
データをただ取得するときはget。
ネットワーク越しに通信してデータを取ってきて戻ってくる場合は、fetchという単語を使う。
* 特定の値が変わったらデータを再取得(refetch)する。

* useEffect内に記載することで初回レンダリングの度に実行される。
第二引数を設定することで第二引数が変更する度に実行される。

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

[非同期処理の完了を待つ方法！Promise＆async/await【分かりすぎて怖いJavaScript入門】 \- YouTube](https://www.youtube.com/watch?v=Vhnz1V-v1cU&list=PLX8Rsrpnn3IVvcPCZTixO7Pf5lAGoyNOA&index=7&t=4s)
* 非同期処理は、実行を待たない。
メリット：ユーザーを待たせない。ユーザーに別の操作を許可する。
デメリット：実行完了までデータが存在しないのでそこの制御が難しい。
→非同期処理の実行完了を制御するにはどうしたらいい？
Promiseを使用する。
* 同期処理は、別タスクの実行完了を待つ。
その間自分のタスクは中断する。

* Promiseで完了を待つ方法
pending:初期状態
fullfilled:処理が成功して完了
rejected:処理が失敗して完了

* async/awaitで完了を待つ方法
非同期処理を伴う関数を定義する際にasyncをつける。
その関数の実行の際にawaitをつける。

# [俺のReactがこんなに遅いわけがない【React\.memoでパフォーマンスチューニング】 \- YouTube](https://www.youtube.com/watch?v=s6HThFCXgsw&list=RDCMUC-bOAxx-YOsviSmqh8COR0w&start_radio=1&rv=s6HThFCXgsw&t=48)
* propsに変更がない場合に、memo化したコンポーネントの再レンダリングをskipできる。

# [俺のReactがこんなに遅いわけがない【Hooksでパフォーマンスチューニング】 \- YouTube](https://www.youtube.com/watch?v=cNDEUPeOJTo&list=RDCMUC-bOAxx-YOsviSmqh8COR0w&index=2)
Reactのパフォーマンスチューニング方法
* React.memoで、コンポーネントのメモ化
* useMemo()で、変数のメモ化。重い計算を回避。
※重い計算を行わない場合は、使用しない(通常の変数宣言の方が高速なので)。
```
const ids = useMemo(() => {
}, [amount])  ←このamountの値が変化した場合だけ再計算が走る。
```
* useCallback()で、関数のメモ化。関数の再生成を回避。
[React HooksのuseCallbackを正しく理解する \- Qiita](https://qiita.com/uehaj/items/99f7cd014e2c0fa1fc4e)