[TIL]Reactに関連

きょう習った

動作に関連

ステータス管理ライブラリの比較

ステータス管理ライブラリとは?
複数の親構成部品と子構成部品からなるReactでは、各構成部品でUSState Hookを使用してローカル状態を管理できます.子構成部品で使用する場合はpropsに渡すことができます.
しかし、規模がますます大きくなり、中間で使用されない素子では、値のみが伝達される非効率が生じる可能性がある.
したがって、グローバル管理ステータスのツールを使用して一緒に使用できます.

ステータス管理ライブラリのタイプ
1. Redux
2. MobX
3. Context API
4. Recoil
などなど.

Redux
Reduxは、Javascriptアプリケーションのデータをグローバルに管理するためのライブラリです.
したがって、Reactに属するライブラリからではなく、ReactとReduxが両方のライブラリを使用できるように、React-Reduxというライブラリを追加します.(useDispatch, useSelector ..)

もちろんやらなくてもいいですよね?(mapDispatchToProps...)

プロパティ
storeのグローバルステータスが格納されている場所があるので、誰も触ってはいけません.
構成部品はstoreに直接アクセスできません.stateを変更する場合は、actionを割り当ててstore内のreduceのstateを変更し、変更したstateを構成部品購読で行う必要があります.(読み取り専用)

また、stateは純関数でのみ変更できます.
reduceから新しい状態値を返す場合、ランダム、Dateオブジェクトへの書き込み、または非同期操作などの純粋な関数を記述する論理は使用できません.

ミドルウェア
reduceでactionを処理し、ステータスを変更する前に実行する関数.
さっきのように非同期操作もそのまま減速機ではできません!!では、サーバからデータを受信したり格納したりする場合も、直接減速機から行うことはできません.
では、どのサーバにデータを格納しますか?

中間部品を使用して非同期操作を実行し、減速機の状態変更を許可するために動作スケジューリングを行う必要があります.
代表的なミドルウェアはredux-logger、redux-thunk、redux-sagaである.
FacebookデザインのデザインモデルFluxからコンセプトを始めました.

の利点
reactに属するライブラリからではないので、他のjsライブラリ/フレームワーク環境でも使用できます.
非同期処理のためにミドルウェアを追加して構成できます.
redux devtool extension(ブラウザエクスポート)があり、デバッグが容易です.
グローバルステータス管理のほか、ローカルストレージステータスストレージ、エラーレポート添付ファイルなどの機能も提供します.
単一storeでstateを変更できるオブジェクトはreduceのみなので、デバッグが容易です.

の欠点
ライブラリを追加するので、使用する依存性が1つ増えました.(ライブラリの依存性が向上)
ミドルウェアの使用概念を熟知している(reduceで直接処理できない)
context apiに比べて、作成されたコードは多く、比較的複雑です.

mobX
reduxとともに使用される一般的なステータス管理ライブラリ
基本的にmobXはクラス要素を基準に整列しています.
Hook(関数として使用する場合)を同時に使用するには、mobx-react v 6、mobx-react-liteを使用する必要があります.

State
観測可能な状態のデータとして観察された.Mobxでは、この状態が観察されており、変化すると応答と駆動が発生します.
Derivations(Computed values)
既存の状態が変化するにつれて計算される値を表します.
Reactions
これは,観測可能な状態の変化に伴う付加的な変化を意味し,値の変化に基づいて行うべきことを決定する.Derivationとは異なり、通常はI/Oに関連した値は生成されず、DOM更新やネットワークリクエストなどに関連しています.
Action
状態を変えるすべてを意味する.Mobxでは,すべてのユーザの動作による状態変化を「駆動」と「応答」と見なす.

特長
複数のstoreを持つ.
Decoratorを使用してコード作成を簡略化できます
オブジェクト向け
デザインが比較的簡単
redixとは異なり、observerで変更を自動的に追跡します.
単一ストレージであるため、stateオブジェクトの深さが深ければ深いほど、面倒になり、管理しにくくなります.(=>immutable.jsライブラリなどは利用できますが、それでも面倒です)

長所
シンプルなデザイン
例)

mobX store

import {observable} from 'mobx';
 
class CounterStore {
  @observable counter = 0;
 
  increment() { this.counter++; }
 
  decrement() { this.counter--; }
}
 
export default new CounterStore();

素子にmobX記憶領域

を用いる.

import React from 'react';
import {observer} from 'mobx-react';
import store from './store.js';
 
const Counter = () => (
  <div>
    <button onClick={() => store.increment()}>+1</button>
    <span>{store.counter}</span>
    <button onClick={() => store.decrement()}>-1</button>
  </div>
);
 
export default observer(Counter);

一連の接続要素および状態の動作(mapDispatchToProps、mapStateToProps/react-reduxのhookなどを使用する)をreduxのように実行する必要がなく、このように簡単に実施することができる.
ReduxのようにStateの不変性を保つ努力は必要ありません.

の欠点
Reduxとは異なり、ステータスは変更可能なので危険です.
(Mobx State Tree)を使用すると、正確なデータ管理とステータスの不変性を向上させることができます.

Context API
reactに内蔵されているhookは、reactでのみ使用できます.
グローバルステータス管理機能としてのみ使用できます.(reduxに示すように、ミドルウェアには他の機能はありません)
複数のリポジトリが存在する可能性があります.

ステータスストレージコンテキスト、グローバルステータスを提供するプロバイダ、およびグローバルステータスを受信するプロバイダから構成されます.
実際、Reduxはcontextapiを使用して作成されたライブラリです.

長所
依存関係を追加することなく、グローバル・ステータスを管理できます.

短所
複数のステータスがある場合は、プロバイダを重ねて置く必要があります.
stateとdispatchが変化するたびに、すべてのサブスクリプションプロバイダの構成部品がレンダリングされます.
ほとんどの大規模なサービスでは、reduxまたはmobxグローバルステータスライブラリが使用されます.

[注釈とソース]
https://velog.io/@mementomori/React-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC-Tool-%EC%82%AC%EC%9A%A9-%EB%B9%84%EA%B5%90-Redux-VS-MobX-VS-Context-API
https://velopert.com/3528
https://egg-programmer.tistory.com/281
https://velog.io/@cada/React-Redux-vs-Context-API#context
https://lannex.github.io/blog/2020/redux-mobx/
https://boxfoxs.tistory.com/383
https://ykss.netlify.app/react/redux_mobx_recoil/