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获取所有道具。据我所知，它可以正常工作。

对于第二种情况：

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正确的方法？

1 个答案: