React-Reduxパフォーマンスの最適化
2357 ワード
前に2つの文章「Reactコンポーネント性能最適化」「Redux性能最適化」を書いて、それぞれReactとReduxの使用上の性能最適化についていくつかの提案をしました.しかし、ReactとReduxを一緒に使用するには、React-Reduxの使用上のいくつかのパフォーマンス最適化の推奨事項について説明するツールReact-Reduxが必要です.
React-Reduxは公式のReactとReduxリンクツールです
Provider
簡単なReactコンポーネントで、storeをcontextに配置することが主な役割を果たし、connectはstoreを取得し、storeの方法、例えばdispatchを使用することができます.実はconnectされていないコンポーネントはcontextType属性を宣言することでstoreを取得してstoreを使用する方法もありますが、この場合dispatchを使ってstoreのstateを修正した場合、React-Reduxは修正したstateをpropsとしてReactコンポーネントに渡すことができず、UIとデータが同期しない可能性があるので、このときは自分が何をしているのかをはっきりさせなければなりません.
connect
コリー化関数で、関数は2回呼び出されます.1回目はパラメータの設定、2回目はコンポーネントとRedux storeの接続です.connect関数は、受信したReactコンポーネントを変更しません.Redux storeに接続された新しいコンポーネントを返します.この新しいコンポーネントを使用する必要があります.connectの使用方法は mapStateToPropsはstoreが変更されたときに呼び出され、返された結果をコンポーネントのpropsとします. mapDispatchToPropsの主な役割は、ReactコンポーネントにおけるReduxの存在感を弱めることであり、コンポーネント内部でstoreの操作感覚を変更することは、propsを介して伝達される関数を呼び出すようにすることである.一般的にはReduxのbindActionCreatorsに合わせて使用されます.この関数を指定しないと、dispatchはコンポーネントpropsに注入されます. mergePropsは、mapStateToProps、mapDispatchToProps、ownProps(コンポーネント自体のプロパティ)のマージルールを指定し、マージの結果をコンポーネントのpropsとします.この関数を指定する場合は、あまり複雑にしないことをお勧めします. optionsでは主にpureに注目しています.もしあなたのコンポーネントがpropsとReduxのstateに依存している場合は、pureは必ずtrueでなければなりません.そうすれば、不要な更新を避けることができます. Componentは接続するReactコンポーネントであり、コンポーネントは任意であってもよく、AppRootとは限らない.一般的にstoreを更新する必要があるか、storeのstateに依存する最小コンポーネントです.接続されたコンポーネントはReduxのstateが変更されると更新されるため、広範囲の更新はパフォーマンスに友好的ではなく、一部のコンポーネントは更新する必要がなく更新される可能性があるため、できるだけ分割、細分化し、connectはstoreまたはstoreに依存するstateの最小コンポーネントのみを更新します.
Reselect
mapStateToPropsはselectorとも呼ばれ、storeが変化すると呼び出されますが、selectorが関心を持っているデータが変化するかどうかにかかわらず呼び出されますので、selectorの計算量が非常に大きい場合は、更新するたびに再計算するとパフォーマンスの問題が発生する可能性があります.Reselectは、これらの不要な再計算を省くことができます.ReselectはcreateSelector関数を提供し、記憶可能なselectorを作成します.createSelectorはinput-selectors配列と変換関数をパラメータとして受信します.state treeの変更がinput-selector値の変化を引き起こす場合、selectorは変換関数を呼び出し、input-selectorsをパラメータとして入力し、結果を返します.input-selectorsの値が前回と同じ場合、変換関数を呼び出すことなく、前回計算したデータが直接返されます.これにより、不要な計算を回避し、パフォーマンスを向上させることができます.
まとめ
contextのstoreを慎重に使用
connectコンポーネントの更新時に影響範囲をできるだけ小さくし、更新不要を避ける
Resselectを使用して不要なselector計算を回避
リファレンス
React-Redux
Reselect
React-Reduxは公式のReactとReduxリンクツールです
Provider
簡単なReactコンポーネントで、storeをcontextに配置することが主な役割を果たし、connectはstoreを取得し、storeの方法、例えばdispatchを使用することができます.実はconnectされていないコンポーネントはcontextType属性を宣言することでstoreを取得してstoreを使用する方法もありますが、この場合dispatchを使ってstoreのstateを修正した場合、React-Reduxは修正したstateをpropsとしてReactコンポーネントに渡すことができず、UIとデータが同期しない可能性があるので、このときは自分が何をしているのかをはっきりさせなければなりません.
connect
コリー化関数で、関数は2回呼び出されます.1回目はパラメータの設定、2回目はコンポーネントとRedux storeの接続です.connect関数は、受信したReactコンポーネントを変更しません.Redux storeに接続された新しいコンポーネントを返します.この新しいコンポーネントを使用する必要があります.connectの使用方法は
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])(Component)で、初めて呼び出すときは4つのパラメータがオプションです.Reselect
mapStateToPropsはselectorとも呼ばれ、storeが変化すると呼び出されますが、selectorが関心を持っているデータが変化するかどうかにかかわらず呼び出されますので、selectorの計算量が非常に大きい場合は、更新するたびに再計算するとパフォーマンスの問題が発生する可能性があります.Reselectは、これらの不要な再計算を省くことができます.ReselectはcreateSelector関数を提供し、記憶可能なselectorを作成します.createSelectorはinput-selectors配列と変換関数をパラメータとして受信します.state treeの変更がinput-selector値の変化を引き起こす場合、selectorは変換関数を呼び出し、input-selectorsをパラメータとして入力し、結果を返します.input-selectorsの値が前回と同じ場合、変換関数を呼び出すことなく、前回計算したデータが直接返されます.これにより、不要な計算を回避し、パフォーマンスを向上させることができます.
まとめ
contextのstoreを慎重に使用
connectコンポーネントの更新時に影響範囲をできるだけ小さくし、更新不要を避ける
Resselectを使用して不要なselector計算を回避
リファレンス
React-Redux
Reselect