Context api, redux, mobx, swr, React Currying

Context api

通常、データは上から下(親から子)までpropsで転送されますが、propsがアプリケーション内の複数のコンポーネント(たとえば、プリファレンス領域設定、UIトピック)に転送する必要がある場合は、このプロセスが面倒になる可能性があります.
コンテキストでは、ツリーステップごとにpropsを明示的に渡すことなく、多くの構成部品がこれらの値を共有できます.

いつcontextを書きますか。

contextは、グローバル(global)と見なすことができるデータを「react素子ツリー」で共有するための設計方法である.これらのデータには、現在ログインしているユーザー、トピック、および優先言語が含まれます.例えば、次のコードは、ボタンコンポーネントを修飾するためにトピックpropsを明確に伝達する.


詳細:https://ko.reactjs.org/docs/context.html

redux

ReduxはJavaScriptステータス管理ライブラリです.
Reduxの本質はノードです.jsモジュールです.

Reduxの基本概念:3つの原則

1. Single source of truth

同じデータは常に同じ場所から来ます.
つまり、ショップにはデータスペースが1つしかありません.

2. State is read-only

ステータスを変更するには、setStateメソッドを反応器で使用します.
reduceでは、このオブジェクトを動作させることでのみステータスを変更できます.

3. Changes are made with pure functions

変更は純粋な関数のみです.
これは李杜書に関する概念です.
ストレージ→アクション→リプレイ

Reduxのメリット

状態を予測可能にする.(純関数を使用するため)
メンテナンス(複雑なステータス管理と比較)
デバッグ(actionとstate logの記録)→redox dev tool(クロム拡張)
純粋な関数を使用するため、テストの貼り付けに使用します.
詳細:https://ko.redux.js.org/

mobx

MobXは検証されたライブラリであり,関数式反応式プログラミングを透過的に適用することで,状態を容易に管理でき,拡張性がある.(TFRP, Transparent Functional Reactive Programming). MobXの哲学は簡単です.

やさしい

ボイラプレートから解放されたコンパクトなコードにより、お客様の意図を徹底的に表現します.データを変更しますか?JavaScriptを使用して文を割り当てます.非同期中にデータを変更しますか?新しいツールは必要ありません.MobXシステムは変更を発見し、使用する場所に送信します.

レンダリングの最適化は簡単に行えます。

データのすべての変更と使用は、実行時に追跡され、ステータスと出力のすべての関係を表す依存ツリー(dependency tree)が作成されます.従って、必要に応じて処理素子のように状態に応じて演算を実行することができる.したがって、アノテーション、セレクタなどを使用して構成部品を最適化する必要はありません.

こうぞうじゆう

UIフレームワーク以外でアプリケーションのステータスを管理できます.これにより、コードが容易に切断され、他の場所で使用されやすくなり、テストが容易になります.
詳細:https://ko.mobx.js.org/README.html

swr

データのインポートに使用される応答プログラム
「SWR」の名称は、HTTP RFC 5861に知られているHTTPキャッシュ無効ポリシー「時代遅れ-同時-再検証」に由来する.SWRのポリシーは、キャッシュ(ステータス)からデータを返し、取得(再検証)を要求し、最後に最新のデータを取得することです.

import useSWR from 'swr'

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

この例では、userSWR hookはkey文字列とfetcher関数を受信します.keyは、データの一意の識別子(通常はAPI URL)であり、fetcherとして渡される.fetcherは、データを返す任意の非同期関数であってもよい.ネイティブfetchやAxiosなどのツールを使用できます.
hookは、リクエストステータスに基づくデータとエラーの2つの値を返します.
1行のコードだけで、プロジェクト内のデータインポートロジックをシンプル化し、次の驚くべき機能をすぐに使用できます.

高速、軽量、再利用可能なデータインポート

内蔵キャッシュと要求重複除外

リアルタイム体験

は、送信およびプロトコルによって制限されない

.

SSR/ISR/SSG support

準備

Type Script

React Native

詳細:https://swr.vercel.app/ko

React Currying

「トリム」(Currying)メソッドは、複数のパラメータを固定する新しい関数を作成する方法です.
[トリム](Trim)メソッドを適用する場合、パラメータの順序は非常に重要です.小さい可変パラメータは前に、大きい可変パラメータは後ろに置くべきです.この点を考慮してカードリングを使用する必要があります.

1.関数の拡張が容易です。

2.重複因子を避けることができる。