Recoilの公式ドキュメントをgoogle翻訳するとコードまで翻訳されてしまうのが面倒なのでQiitaにまとめてみます。
追々追加していきます。(多分)
⚠️この記事は最新では無いので、公式ドキュメントと合わせてお読みいただくのが良いと思います。
目次
- 前書き
- ①動機
- ②コアコンセプト
- ③インストール
- ④入門
- 基本チュートリアル ⑤ ⑥ ⑦
- ガイド ⑧ ⑨ ⑩
- APIリファレンス
- Core ⑪ ⑫ ⑬ ⑭ ⑮ ⑯ ⑰ ⑱ ⑲ ⑳ ㉑ ㉒ ㉓ ㉔ ㉕ ㉖ ㉗
- 実用(utils) ㉘ ㉙ ㉚ ㉛ ㉜ ㉝ ㉞ ㉟
※全目次は一番下にあります
動機
互換性と単純さの理由から、外部のグローバル状態ではなく、Reactに組み込まれている状態(state)管理機能を使用することをお勧めします。
しかし、Reactにはいくつかの制限があります。
- コンポーネントの状態は、共通の祖先に押し上げることによってのみ共有できますが、これには再レンダリングが必要な巨大なツリーが含まれる場合があります。
- コンテキストは単一の値のみを格納でき、それぞれが独自のコンシューマを持つ値の不確定なセットは格納できません。
- どちらの方法でも、木(ツリー)の上部(stateが存在しなければならない場所)と葉(stateが使用される場所)をコード分割するのは困難です。
APIとセマンティクスと振る舞いの両方を可能な限りReactらしく維持しながら、これを改善したいと考えています。
Recoilは、Reactツリーに直交するだけでなく、固有かつ添付(アタッチ)された有向グラフを定義します。
state変化は、このグラフの根(我々はatomと呼んでいます)から純粋な関数(selectorと呼んでいます)を通ってコンポーネントへと流れます。
この方法では、次のようになります。
- 共有しているstateが、React local state(必要に応じてReducer等でカプセル化することができる)と同じ単純なget/setインターフェースを持つ、定型のないAPIを入手しました。
- Concurrent Modeやその他のReactの新機能が利用可能になれば、それらと互換性を持つ可能性があります。
- state定義は増分及び分散されているため、コード分割が可能です。
- stateは、それを使用するコンポーネントを変更することなく、派生データで置き換えることができます。
- 派生データは、それを使用するコンポーネントを変更することなく、同期と非同期の間で移動できます。
- ナビゲーションは、linkにおけるstate遷移の符号化(エンコーディング)さえも、第一級の概念として扱うことができる。
- 後方互換性のある方法でアプリケーションのstate全体を永続化するのは簡単なので、永続化されたstateはアプリケーションの変更に耐えることができます。
参考サイト
・公式ドキュメント
・フリーソフトによるデータ解析・マイニング 第61回 ←(有向グラフ)
・Pure function (純粋関数)とは
・みらい翻訳
全目次
- 前書き
- ①動機
- ②コアコンセプト
- ③インストール
- ④入門
- 基本チュートリアル
- ⑤概要
- ⑥Atoms
- ⑦Selectors
- ガイド
- ⑧非同期データクエリ
- ⑨非同期状態・同期状態
- ⑩Stateの永続性
- APIリファレンス
-
Core
• ⑪ <RecoilRoot />
• State
・ ⑫atom()
・ ⑬selector()
・ ⑭Loadable
・ ⑮useRecoilState()
・ ⑯useRecoilValue()
・ ⑰useSetRecoilState()
・ ⑱useResetRecoilState()
・ ⑲useRecoilValueLoadable()
・ ⑳useRecoilStateLoadable()
・ ㉑isRecoilValue()
• Snapshots
・ ㉒Snapshot
・ ㉓useRecoilTransactionObserver()
・ ㉔useRecoilSnapshot()
・ ㉕useGotoRecoilSnapshot()
• ㉖useRecoilCallback()
• 雑録(Misc)
・ ㉗useRecoilBridgeAcrossReactRoots()
-
実用(utils)
• ㉘atomFamily()
• ㉙selectorFamily()
• ㉚constSelector()
• ㉛errorSelector()
• ㉜waitForAll()
• ㉝waitForAny()
• ㉞waitForNone()
• ㉟noWait()