Recoilの公式ドキュメントをgoogle翻訳するとコードまで翻訳されてしまうのが面倒なのでQiitaにまとめてみます。
追々追加していきます。(多分)
目次
※全目次は一番下にあります
useRecoilBridgeAcrossReactRoots()
このhookは、ネストされたReact rootとレンダラーでRecoil stateをブリッジするのに役立ちます。
function useRecoilBridgeAcrossReactRoots_UNSTABLE():
React.AbstractComponent<{children: React.Node}>;
ネストされたReact rootがReactDOM.render()で作成された場合、またはネストされたカスタムレンダラーが使用された場合、Reactはコンテキストのstateを子ルートに伝播しません。このhookは、"bridge"とReact rootがネストされたRecoil stateを共有する場合に便利です。hookはReactコンポーネントを返します。このコンポーネントは、ネストされたReact rootの代わりに使用して、同じ一貫性のあるRecoil store stateを共有できます。Reactのルート間でstateを共有する場合と同様に、すべてのケースで変更が完全に同期されるとは限りません。
サンプルコード
function Bridge() {
const RecoilBridge = useRecoilBridgeAcrossReactRoots_UNSTABLE();
return (
<CustomRenderer>
<RecoilBridge>
...
</RecoilBridge>
</CustomRenderer>
);
}
function MyApp() {
return (
<RecoilRoot>
...
<Bridge />
</RecoilRoot>
);
}
参考サイト
・公式ドキュメント
・IT用語辞典 e-Words レンダラー
・IT用語辞典 e-Words ブリッジ
・みらい翻訳
全目次
- 前書き
- 基本チュートリアル
- ガイド
- 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()