HOC 正确的方式？答案

【问题标题】：HOC the right way?HOC 正确的方式？
【发布时间】：2019-01-19 09:24:55
【问题描述】：

我错误地编写了两个版本的 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);
};

【问题讨论】：

标签： reactjs higher-order-components

【解决方案1】：

使用 HOC 需要记住的第一件事是，任何包装在 HOC 中的 react 组件仍会产生一个 react 组件。

第一种情况：

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 }; 获得的 props 仍然可以用于requireAuth，因为requireAuth 被包裹在另一个连接中，这将为requireAuth 从反应状态提供所需的 props。

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

【讨论】：