context api, redux, mobx, swr

3452 ワード
React テキストリンク

props drilling


リアクターはpropsを介して親コンポーネントから子コンポーネントにデータを渡す.構成部品が直接接続されていれば良いのですが、作業中に複数の構成部品でデータを渡す必要がある場合があります.これはprops drillingと言います.

global state


propsドリルを避けて、データを構成部品に渡します.context api、redox、mobx、swrなどを使用して設定できます.

Context API


これはreactが提供する機能で、他のライブラリとは異なり、インストールする必要がなく使用できます.
createContextとして作成し、管理するステータスをオブジェクトとします.

import { createContext } from 'react'

export const GlobalContext = createContext({
  name: "",
  setName : (_) => {}
})
これらをusStateの状態に設定して再受信します.
const [name, setName] = useState("aaa")
_app.tsxの戻り部分.プロバイダで包む.
<GlobalContext.Provider value={{name, setName}}>

</GlobalContext.Provider>
次に、使用するページからcontextを作成したページをインポートします.
const {
  name, setName
} = useContext(GlobalContext)
使用可能
しかし、stateが変更されると、その値を持つすべての場所が再レンダリングされます.

Redux


トラフィックベースのステータス管理ライブラリ.多くの人が使用していますが、欠点はコードの作成が複雑であることです.
https://ko.redux.js.org/

Mobx


ステータス管理ライブラリ.
https://mobx.js.org/

SWR


ステータス管理ライブラリはState While Revalidateのサムネイルです.
クラスの基礎、作成者、消滅者
DFS