この記事は何
Reactの学習メモ。
前回:Reactで簡単なアプリケーションを作成するための準備(1) - めも
メモ
パッケージマネージャ
yarn
- JavaScriptのパッケージマネージャ、
package.json
で指定されたパッケージをインストール - yarn.lockで各パッケージのインストールバージョンを固定できる
yarn add {package-name}
でpackage.json
にパッケージを追加- yarn run | Yarnでscriptを実行
npm
- npm-scripts:
package.json
のscript
に指定した処理を実行するもの- 繰り返し行う作業・チーム内で共通させたい作業を指定する
npm run [script]
/yarn run [script]
で実行する
Reactのライフサイクル
- ライフサイクル
- Mounting(マウント):表示されるまでの時間
- Updating(更新):stateの更新時間
- Unmounting(マウント解除):他のコンポーネントへ遷移する時間
- それぞれのライフサイクルで実行できる特別なメソッド=ライフサイクルメソッド
イベント処理
- イベント:Event - Web API | MDN
- イベントハンドラは必ず関数を指定する
- 使用できるイベント処理:合成イベント (SyntheticEvent) – React
preventDefault()
: Event.preventDefault() - Web API | MDN
フック
state などの React の機能を、クラスを書かずに使えるようになります。
useState
:現在のstateの値とそれを更新するための関数とをペアにして返す
副作用
DOM 更新...(省略)...これらの操作は他のコンポーネントに影響することがあり、またレンダーの最中に実行することができないので、われわれはこのような操作を “副作用 (side-effects)“、あるいは省略して “作用 (effects)” と呼んでいます。 [引用元]
useEffect
:関数コンポーネント内部で副作用を実行するためのもの- フック早わかり:副作用フック
- 副作用フックの利用法 – React
- useEffect のオプションの第 2 引数の配列は副作用のスキップに用いる
- 前回のレンダー時の値と比較して同じ場合は副作用が発生しない
- 配列が空の場合は比較できるものがないためマウント後の一回きり実行
メモ化
memo / useCallback / useMemo
:不必要な繰り返し計算を無くし、以前の計算結果を再利用する際に役に立つフック。
- 計算結果のメモ化はどのように行うのですか?
- useMemo に渡した関数はレンダー中に実行される、レンダー中に行うことを想定していない処理は渡すべきではない
コンテキスト
コンテクストは各階層で手動でプロパティを下に渡すことなく、コンポーネントツリー内でデータを渡す方法を提供 [引用元]
- Propsを利用せずに(←ドキュメントの日本語で言うところの『手動でプロパティを下に渡すことなく』)コンポーネントにデータを受け渡しできる
- 使うべきタイミング=『中間の要素群を経由してプロパティを渡す』状態がある場合、『何らかのデータが、ネストレベルの異なる多くのコンポーネントからアクセスできる必要がある』場合
- コンテクストオブジェクトには
Context.Provider
が付随する、コンシューマコンポーネント(=子孫となるコンポーネント)はプロバイダの value プロパティが変更されるたびに再レンダーされる - コンポーネントの再利用性が低くなることもある点に留意すべき
- コンテクストをいつ使用すべきか
- コンテクストオブジェクトには
useRef
本質的に useRef とは、書き換え可能な値を .current プロパティ内に保持することができる「箱」のようなもの
- DOMへの参照:利用例=子コンポーネントに命令型でアクセスする
inputEl.current.focus();
- currentに前のstateの情報を保持することで、コンポーネント内での前のstateの保持ができる
.current
プロパティを書き換えてた場合でも再レンダーは発生しない- useRef は毎回のレンダーで同じref オブジェクトを返すため、前回のstateなど書き換え可能な値を保持しておくのに使うことができる
カスタムフック
コンポーネントからロジックを抽出して再利用可能な関数を作ることが可能 ...(省略)... カスタムフックとは、名前が ”use” で始まり、ほかのフックを呼び出せる JavaScript の関数のこと
use
で始めることでフックであると明示的に示し、構文やコードの違反のチェックができるようになる
APIモック
様々なライブラリが存在するが、どれもAPIのモックを簡単に用意してフロントエンドの開発ができるようにすることが目的。
yarn add -D json-server
としてインストール後、scriptを追加
{ "scripts": { "mock-server": "json-server --watch db.js --port 3001" } }
してから mock-server
としてモックを起動する。
- axios(xhr/Ajaxを使うためのモジュール)などを経由して作成したAPIモックにPOST/GETすることができる(json-server · GitBook)
- json-serverで作成したDBをもとに表示が決まるコンポーネントに、stateとDB更新メソッドを持つカスタムフックを定義することで、json-serverを使ったモックを使った開発を進められる