コイルを潰す~👊

Recoilライブラリの同期Featを作成します。Docs

Docsの内容を簡単に読めばいいです
互換性と非表示性のため、外部のグローバルステータス管理ライブラリと比較して、React自体に内蔵されているステータス管理機能を使用することが望ましい.
しかし、反応にはこのような問題がある.

要素の状態は、共通の親要素に昇格することで共有できますが、この過程で大きなツリー再レンダリングの効果も発生します.

Contextは単一の値しか格納できず、自身の消費者の複数の値のセットを含むことはできません.

の2つの特性は、ツリーの最上位(存在状態の場所)からツリーの葉(使用状態の場所)へのコード分割を困難にする.

Recoilは、直交するが本質的な方向図を定義し、「反応ツリー」に貼り付けます.状態変化は、この図形のルート(atomsと呼ばれる)から純粋な関数(セレクタと呼ばれる)を介して素子に流れ、以下の方法に従う.

RECTの内部状態(ローカル状態)のように、共有状態(共有状態)を簡単なGET/SETインタフェースとして使用できるテンプレートレスAPIを提供した.(必要に応じて還元剤等を用いてカプセル化することもできる.)

同期モードを含む他の新しい機能と互換性もあります.

ステータス定義はインクリメンタルで分散されているため、コードを分割することができる.

の状態を使用する要素を変更する必要がなく、派生データで状態を置き換えることができる.

派生データを使用する要素を変更する必要はなく、派生データは同期と非同期の間で移動することができる.

探索を1級概念とすることができ,リンク内で状態変換を符号化することもできる.
逆互換性によりアプリケーション全体の状態を維持することは容易であり、アプリケーションが変更された場合でもこの状態を維持することができます.

主な概念

Atoms

Atomsはステータス単位であり、更新および購読が可能である.

atomが更新されると、修復された各構成部品は新しい値を反映するように再レンダリングされます.

原子は、実行時に生成される可能性があります.

Atomsは、reactのローカル要素状態に代わることができる.

同じ原子

が複数の要素で使用される場合、すべての要素は状態を共有する.

atom 함수를 이용하여 생성
const fontSizeState = atom({
  key: 'fontSizeState',
  default: 14,
});

Atomsには、すべてのatomsのマッピングをデバッグ、持続性、および表示するための特定の高度なAPI用の一意のキーが必要です.2つのatomが同じ鍵を持つのはエラーであるため、鍵値はグローバルで一意である必要があります.React素子の状態のようなデフォルト値もあります.
構成部品からatomを読み取り、書き込むにはuserRecoilstateというフックを使用します.ReactのuseStateと似ていますが、ステータスが構成部品間で共有できる違いがあります.

function FontButton() {
  const [fontSize, setFontSize] = useRecoilState(fontSizeState);
  return (
    <button onClick={() => setFontSize((size) => size + 1)} style={{fontSize}}>
      Click to Enlarge
    </button>
  );
}

ボタンをクリックすると、ボタンのフォントサイズが1増加し、fontSizeState atomを使用する他の構成部品のフォントサイズも変化します.

selectors

セレクタは、入力として原子または他のセレクタを受け入れる純粋な関数です.
親のatomsまたはセレクタを更新すると、子のセレクタ関数も再実行されます.
コンポーネントは原子のようにセレクタを購読でき、セレクタが変更されると、コンポーネントも再レンダリングされます.
純粋な関数とは?-ある関数に同じパラメータを付与すると、常に同じ値の関数が返されます.
関数add(a,b){return a+b}//純関数
let c = 10;
function add(a,b,c) { return a + b + c }//!== じゅんかんすう
セレクタは、ステータスベースの派生データを計算するために使用されます.最小の状態セットのみが原子に格納され、他のすべての派生データはセレクタで指定した関数によって有効に計算され、無駄な状態の保持を防止します.
セレクタは、どの構成部品が自分を必要とするか、およびどの状態に依存するかを追跡し、この関数式の方法を非常に効果的にします.
素子の観点から,セレクタとatomsは同じインタフェースを有し,互いに置き換えることができる.

const fontSizeLabelState = selector({
  key: 'fontSizeLabelState',
  get: ({get}) => {
    const fontSize = get(fontSizeState);
    const unit = 'px';

    return `${fontSize}${unit}`;
  },
});

getプロパティは計算する関数です.渡されたgetパラメータからatomsや他のセレクタにアクセスできます.アクセスすると自動的に依存関係になり、原子とセレクタが更新されると、この関数も再実行されます.
このfontSizeLabelStateの例では、セレクタはfontSizeStateというatomに依存する.
概念的にfontSizeLabelStateセレクタはfontSizeStateを入力として使用し、フォーマットされたフォントサイズラベル
動作は、返される純粋な関数を出力するのと同じです.
セレクタはuserRecoilValue()を使用して読み込むことができます.
userRecoilValue()は、パラメータとしてatomまたはセレクタを受信し、対応する値を返します.
fontSizeLabelStateセレクタは書き込み不可なのでuserRecoilstate()は使用しません.

function FontButton() {
  const [fontSize, setFontSize] = useRecoilState(fontSizeState);
  const fontSizeLabel = useRecoilValue(fontSizeLabelState);

  return (
    <>
      <div>Current font size: ${fontSizeLabel}</div>

      <button onClick={setFontSize(fontSize + 1)} style={{fontSize}}>
        Click to Enlarge
      </button>
    </>
  );
}

長文が終わり、インストールが始まります🤤

npx create-react-app my-app
yarn add recoil
インストール完了!

やるべきこと

受信値を入力してatomに保存し、セレクタを使用して保存した値に基づいてtextを使用します.lengthを表示するアプリケーションを作成します.

RecoilRoot

まず、recoil状態の構成部品を使用するには、親ツリーのある場所に表示されるRecoilRootが必要です.
ルート素子はRecoilRootを入れるのに最適な場所です.(App.js)

import logo from "./logo.svg";
import {
    RecoilRoot,
    atom,
    selector,
    useRecoilState,
    useRecoilValue,
} from "recoil";

function App() {
    return (
        <RecoilRoot>
            <CharacterCounter />
        </RecoilRoot>
    );
}

atom

const textState = atom({
  key: 'textState', // unique ID (with respect to other atoms/selectors)
  default: '', // default value (aka initial value)
});

Atomは状態の一部を表す.Atomsは任意の要素で読み書きできます.
atom値を読み込む構成部品は、デフォルトでatomを購読します.
したがって、atomに変化が発生した場合、サブスクリプションのすべての構成部品が再レンダリングされます.

function CharacterCounter() {
  return (
    <div>
      <TextInput />
      <CharacterCount />
    </div>
  );
}

function TextInput() {
  const [text, setText] = useRecoilState(textState); // atom 사용법 useRecoilState(key)

  const onChange = (event) => {
    setText(event.target.value);//setText로 지정한 atom의 값을 변경
  };

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <br />
      Echo: {text}
    </div>
  );
}

Selector

セレクタは、派生状態の一部を表します.派生した状態は状態の変化である.派生した状態は、任意の方法で所与の状態の純粋な関数を修正することによって伝達される状態の生成物と見なすことができる.

const charCountState = selector({
  key: 'charCountState', // unique ID (with respect to other atoms/selectors)
  get: ({get}) => { 
    const text = get(textState);// get(atomKey) 를 통해 값을 전달 받는다. atom의 값이 바뀌면 함수도 재실행

    return text.length;
  },
});

function CharacterCount() {
  const count = useRecoilValue(charCountState);//useRecoilValue(selectorKey) 

  return <>Character Count: {count}</>;
}