最終更新:2022-08-25 (木) 20:56:10 (618d)  

React/最適化
Top / React / 最適化

React/メモ化

  • 再レンダリングを抑制
↑

グローバルなステート管理

  • propsのバケツリレーを回避
    • バケツリレーすると再レンダリングもされるので非効率
↑

React/コンテクストを使う

  • React.createContextする
  • ContextのProviderでグローバルステートを扱いたいコンポーネントを囲う
  • コンポーネントでuseContextを使う
↑

例 (AdminFlagProvider?.jsx)

  • Contextを生成 
    export const AdminFlagContext = createContext({});
    • createContextの引数はデフォルト値
  • Providerを作成 (valueという属性で使いたいステートを渡す) 
    export const AdminFlagProvider = props => {
const children = {props};
const stateObj = { aaa: "bbb" }
return (
  <AdminFlagContext.Provider value={stateObj}>
    {children}
  </AdminFlagContext.Provider>
);
}
    • Provider内でuseStateを使いステートを宣言することも可能
  • ルートのコンポーネントをProviderで囲う 
    ReactDOM.render(
  <AdminFlagProvider>
     <App />
  </AdminFlagProvider>
  , ...
)
  • 子コンポーネントもProviderに囲われている扱いになるのでステートを参照したいコンポーネントでuseContextを使う 
    const contextState = useContext(AdminFlagContext);
//contextState = {aaa: "bbb" }
↑

再レンダリングのタイミング

  • Contextオブジェクトの値(valueで指定したもの)がなにか更新されたときはそのコンテキストを参照しているコンポーネントが再レンダリングされる
↑

メモ

  • Providerのネストは可能
↑

その他

↑

Reduxを使う

  • 2015年からある
  • 状態管理のライブラリ
  • 単一方向にしかデータが流れない
↑

Recoilを使う

  • 2020/05に公開



検索：