web-dev-qa-db-ja.com

コンポーネントをconnectおよびwithRouterでラップする順序は重要ですか

どのHOCが他をラップします。複数のHOCでラップする順序は、反応するかどうかに関係しますか？複数のHOCを作成しましたwithSocket、withLoadingBarなど。深い醜い入れ子について心配する必要があります。コンポーネントのパフォーマンスに影響しますか？

reactjsreact-routerreact-reduxreact-router-v4
10
SAAD

複数のHOCでラップする順序は、反応するかどうかに関係しますか？

1つのHOCからその子コンポーネントに渡される小道具のため、HOCをラップする順序は重要です。次の例を考えてみましょう

const mapStateToProps(state, props) {
   console.log(props.match);
   return {
      match: props.match
   }
}

最初のケース：

withRouter(connect(mapStateToProps)(App));

この場合、withRouterはconnectをラップするため、withRouter ie history, match etcによって提供される小道具はconnectで使用されるmapStateToPropsで使用可能になります。

次のようなHOCを考えてください

const MyComponent = connect(mapStateToProps)(App);
export default withRouter(MyComponent);

ここで、withRouterは次のように実装できます。

const withRouter = (Comp) => {
    return class Something extends React.Component {
      render() {
         return <Comp match={this.context.router.match} />
      }
    }
    ..
}

したがって、この場合、Comp、つまりMyComponentでラップされたwithRouterは、一致小道具を受け取ります。上記の場合、これはconnectでラップされているコンポーネントです。

2番目のケース：

connect(mapStateToProps)(withRouter(App));

この場合、接続はwithRouterをラップするため、withRouter、つまりhistory, match etcによって提供される小道具は、mapStateToPropsによって使用されるconnectでは使用できません。親から提供されていません。

深く醜い入れ子を心配する必要がありますか？

あるHOCが提供する小道具が別のHOCによって使用されている場合にのみ、心配する必要があります。基本コンポーネント内でHOCから渡された小道具を直接使用する場合は、順序について心配する必要はありません。

コンポーネントのパフォーマンスに影響を与えますか？

HOCを使用する順序は、コンポーネントのパフォーマンスに影響しません

例については、以下のコードサンドボックスを確認してください

Edit Simple state wrapper

17
Shubham Khatri

Reactは構成がすべてであり、ほとんどの場合、パフォーマンスの問題になることはありません。実際にパフォーマンスの問題を認識するまでは、心配しないでください。 HOCのネストも問題ありません。考慮する必要があるのは、HOCの1つが別のHOCによって注入された小道具を消費する場合だけです。これは例えばmapStateToPropsでオブジェクトを選択するためにidに_react-router_ urlパラメータが必要な場合。次に、最初にconnect() HOCを適用し、次にwithRouter() HOCを適用して、ラップされたコンポーネントのmatch内のownPropsオブジェクトにアクセスする必要があります。

0
trixn