Oreillyの本を買うのは初めてだったがわかりやすかった。
React、少し忘れかけてた頃だから応用とともに基礎もさらえていい感じだった。
ただ、サーバーサイドレンダリングの箇所は少し変わっていてちゃんと公式のドキュメントを参照すること。
create-react-appの裏側、SSRの話を通してReactの概念を掴むことができた。
以下メモ
第１章、第２章はJavaScript基礎。問題なかったが、第３章の関数型プログラミングから、なかなか難しい。
第４章 Reactの歴史とともに根本的にどんなことをしているか
第５章 JSX記法。問題なかったはず
第６章
レスト構文、スプレット構文を用いた下記の書き方、[...Array(5)].mapといったやり方。
export default function StarRating({ totalStars = 5, style = {}, ...props }) {
const [selectedStars, setselectedStars] = useState(3);
console.log(props);
return (
<div style={{ padding: "5px", ...style }} {...props}>
{[...Array(totalStars)].map((_, i) => (
<Star
key={i}
selected={selectedStars > i}
onSelect={() => setselectedStars(i + 1)}
/>
))}
<p>
{selectedStars} of {totalStars} stars
</p>
</div>
);
}第６章2
ステートを持たない = 純粋関数
6.3.1 refをつかったデータアクセス
DOMを介してデータにアクセスするコンポーネントを制御されていないコンポーネント(uncontrolled component)という。
6.4 バケツリレーの限界
ステート伝達の手段にコンテキストがある。
コンテキストプロバイダー（出発地）
コンテキストコンシューマー（目的地）
useContext
valueプロパティに渡す値は要注意かも set〇〇関数でなくて、もっと限定した操作をする関数を渡したほうがいい
useEffect
コンポーネントの描画が完了した後に副作用としてコールバック関数が呼び出される
副作用→描画の一部ではない処理のこと
描画関数の中で同期関数（alertやlocalStrageなど）を呼び出すと描画前に実行され、コンポーネントの描画を妨げる。
そこでuseEffect。
基本的にReactのアプリケーションでは、データが更新され、コンポーネントが再描画され、副作用が実行されるという一連の処理サイクルが繰り返し実行されている
useLayoutEffect
描画関数 → useLayoutEffect → ブラウザのPaint処理により画面が描画される → useEffect
useReducer
array.reduceのようなリデューサー関数
memo関数 第２引数にpredicateをとる。
ReactmamoやuseMemo,useCallbackをつかったパフォーマンスチューニング
基本的にReactははじめからパフォーマンスを落ちないよう設計されているので、
まず基本的な機能を作り込んでから、パフォーマンスに問題のあるコンポーネントのみチューニングしよう
リグレッション（以前動いてた機能が動かなくなること）に注意
8章データ
HTTPリクエストはPromise同様3つの状態をとるのでそれぞれの状態で描画すべき(error,loading)
レンダープロップ コンポーネントの描画内容をプロパティ経由で他のコンポーネントに渡す。コンポーネントの再利用のためのパターンである。
仮想リスト
ウィンドウリスト
マウントされているかどうかをuseRefで検出
コンポーネントがアンマウントされた後もrefオブジェクトの参照は保持されるため、マウントされているかどうかの判定に使える
export function useMountedRef() {
const mounted = useRef(false);
useEffect(()=>{
mounted.current = true;
return () => (mounted.current = false)
});
return mounted;
}GraphQL
npmのgraphql-requestを使った
WebSocket
HTTPとはことなるプロトコル
9章
エラーバウンダリ
アプリのどこかでエラーが発生した場合、アプリ全体が影響を受ける。
エラーバウンダリとは、あるコンポーネントでエラーが発生しても全体に影響が及ばないようにするための機構。
本通りだとうまくいかなかったのでnpm「react-error-boundary」で実装。
エラーハンドリングは商用のアプリケーションでは必ず実装されるべきとのこと。reactを扱う際は一緒にnpm iしよう。
コードスプリッティング
分割ダウンロードして初回描画を短縮。
遅延ローディング
{ lazy }を使う。読込中はSuspenseのフォールバックに記述する
Suspense
ネットワークエラーが発生したときに数秒待ってからリトライするような処理、複数のリソースを非同期に取得などが可能になった。
// サスペンスデータソース
const loadStatus = (function() {
let error,response;
const promise = new Promise((resolves) => setTimeout(resolves, 3000))
.then(() => (response = "success"))
.catch((e) => (error = e));
return function() {
if(error) throw error;
if(response) return response;
throw promise;
}
})10章 テスト
ESLint
プラグインが豊富
eslint-plugin-react-hooksを使えばReactフックのコードをチェックできる。
eslint-plugin-jsx-a11y はアクセシビリティのチェックができる。
Prettier
ESLintがコードの正しさを保つのに対し、Prettierは読みやすさを保つためのツール
ESLintとPrettierを統合するのに必要なパッケージ：
- eslint-config-prettier ESLintのルールの内、Prettierと相容れないものを無効化
- eslint-plugin-prettier PrettierのルールをESLintのルールに統合するためのプラグイン
型チェック
- PropTypes(React19で削除)
- Flow
- TypeScript
テスト駆動開発（TDD）
実装よりもテストを先行させる開発手法。
React推奨テストフレームワークはJest。creat react app でデフォルト。
Jestが提供するグローバル関数test()
第１引数はテスト名、第２はテストのコードを含む関数、３番めはタイムアウト（デフォルトは2秒）。
スタブ：実装されていないインターフェースをテストの中で呼び出す必要がある時、ダミーのインターフェイスを実装してテストコードから使用することでインターフェイスの実装完了を待たずにテスト開始できる。この時ダミーのインターフェイスをスタブという。
expect関数は値を受け取るとその値がただしいかテストするためのマッチャーを含んだオブジェクトを返す。
単一の値は「toBe」を使い、配列やオブジェクトには「toEqual」を使おう。
コードカバレッジ
全体のコードのうちどれだけの行数がテストされたかを計測してパーセンテージで表すこと。 --coverageフラグで。
すべてのテスト完了後にコンソールのレポートを見たり、coverageフォルダのhtmlを見たりで確認できる。
11章react-routerは割と知っている内容だったのでパス
12章 サーバーサイドReact
アイソモーフィック（isomorphic）なアプローチとは
初回の描画をサーバーサイドで行うことで、SPAの苦手とする初期表示のスピードやSEOの問題を改善すること。
ReacrtDOM.renderを使えばブラウザで描画される。
サーバー上でコンポーネントをReactDOMServer.renderToStringを使ってHTMLの文字列データに変換してレスポンスとして返すことをサーバーサイドレンダリングと呼ぶ。
React19でhydrateも変わってて困惑。
hydrateRootはドキュメントを参照。
8章 リストコンポーネントの最適化 参考に
また、仮想スクロールまたは無限スクロールの実装
blog ローカルストレージにおいてロードできる箇所あればする、レンダープロップ化、スクロール実装、useFetchフック