カテゴリー：React
-
Reactのパフォーマンス改善対策には、主に2つあります。 1.サーバーからのデータ取得回数を減らす キャッシュをすることが重要。従来のuseContextやReduxはキャッシュのメカニズムを持っていない。 近年登場し…
-
Reduxで非同期の場合のSliceの作り方は下記のようになります。 [crayon-6adfc72735469221740354/] createAsyncThunk 従来のreduxだとredux-thunkなどのミドルウェアで行…
-
インストール デフォルトでReactのアプリケーションと同時にRedux Tool Kitのテンプレートを導入できます。 [crayon-6adfc72735d61534864442/] 起動 [crayon-6adfc72735d…
-
全般 Redux Tool Kit Reduxの学習コストが高いことをみてReduxの開発チームが2019年10月にリリースしました。これを使うことで簡単にReduxを導入することが可能になります。 Redux Tool Kitの…
-
Hooks メリット Reactの標準機能なので導入が楽。 useReducerのReducer関数は純粋なJavaScriptのコードなので単体テストが楽 デメリット 全てのReducerを一つのSt…
-
02.27
【React】「useRef」の実践的な使い方
特徴 値が更新されても差分検知されないこと。 よく使われるケース formでinput入力時のレンダリングを防ぐ目的で使われます。useRefを利用してレンダリングを抑えたライブラリが「react-hooks-form」です。 …
-
関数コンポーネント（React.FC） Reactの関数コンポーネントの型になります。React.FunctionalComponentとも書けます。 例 [crayon-6adfc72736c78690627250/] 下…
-
stringの値を渡す。 useStateで定義した関数を子に渡して子から関数を呼べば親の状態も変更することができます。 親コンポーネント [crayon-6adfc727374d5710354171/] 子コンポーネント [cr…
-
redux-sagaとは？ Reduxにタスクという概念を持ち込むためのライブラリです。Redux-sagaに依頼することで間接的にタスクを実行してくれます。 仕組み 非同期処理を別々のスレッド（タスク）のイベントループのように切り出…
-
APIを直接呼ぶ場合 例えば、Renderというコンポーネントが初期表示時にUseEffectを使用してAPIで表示するデータを取得する処理があった場合は下記のようなテストを書きます。 [crayon-6adfc7273839…
