HOC 的正确方法？

Question

我错误地编写了两个版本的 HOC 实现，但它没有给我任何错误并且按预期工作，所以我希望有人能够向我解释差异。 requireAuth 是高阶分量

首先我有一个组件如下

import requireAuth from 'somepath';

class App extends Component {
  ...
}

export default connect(null, actions)(requireAuth(App));

下面是我的requireAuth

import React, { Component } from 'react';
import { connect } from 'react-redux';

export default (ChildComponent) => {
  class ComposedComponent extends Component {
    ...

    render() {
      return <ChildComponent {...this.props}/>;
    }
  }


  function mapStatetoProps(state) {
    return { someProp: state.someState };
  }

  return connect(mapStateToProps)(ComposedComponent);
};

下面是我错误的另一个版本，但没有错误，如果有任何不同，我正在寻找一些解释：

import requireAuth from 'somepath';

class App extends Component {
  ...
}

export default requireAuth(connect(null, actions)(App));//<<=== use requireAuth to surround the whole connect statement instead

下面是 requireAuth:

import React, { Component } from 'react';
import { connect } from 'react-redux';

export default (ChildComponent) => {
  class ComposedComponent extends Component {
    ...

    render() {
      return <ChildComponent />; //<<<======without {...this.props}
    }
  }


  function mapStatetoProps(state) {
    return { someProp: state.someState };
  }

  return connect(mapStateToProps)(ComposedComponent);
};

Answer 1

使用 HOC 需要牢记的第一件事是，任何包装在 HOC 中的反应组件仍然会产生反应组件。

第一种情况：

connect(null, actions)(requireAuth(App));

将为 requireAuth 提供 redux 道具。它将其道具传递给 App 组件。所以 App 组件仍然从 redux 获取所有的 props。据我所知，它是有效的。

对于第二种情况：

requireAuth(connect(null, actions)(App))

您正在将 connect(null,actions)(App) 作为子组件传递给 requireAuth 组件。并且只渲染子组件 return <ChildComponent />。因为 App 组件仍然被 connect 包裹着。 App 组件仍将具有执行所需的所有 redux 道具。所以渲染 ChildComponent 没有道具仍然有效。并且从 return { someProp: state.someState }; 获得的道具仍然可用于 requireAuth，因为 requireAuth 被包裹在另一个连接中，它将提供 requireAuth 来自反应状态的所需道具。

所以这两种情况在理论上看起来都不错。 HOC 的存在是为了让我们的生活更美好，而不是让我们感到困惑。您提出的第一个案例实际上是使用 HOC imo 做事的正确方法；

HOC 的正确方法？

HOC the right way?

reactjs

higher-order-components