Question

我试图更多地了解高阶组件，我的理解是典型的模式是这样的：

const HOC = (WrappedComponent) => {
    ...
    return class extends React.Component {
        render(){
            <WrappedComponent {...this.props} />
        }
    }
}

您可以这样叫：HOC(CustomComponent)

但是，许多流行的库（包括react-redux）都返回一个函数，该函数又返回组件：

const connect = (mapStateToProps) => {
    ...
    const storeToPass = mapStateToProps(store)
    return function(WrappedComponent) {
        return class extends React.Component {
            render(){
                <WrappedComponent {...this.props, ...storeToPass} />
            }
        }
    }
}

您将这样称呼：connect(mapState)(CustomComponent)

我的问题是为什么？有什么原因吗？还是只是偏爱模式？为什么不能为connect函数执行此操作？

const connect = (mapStateToProps, WrappedComponent) => {
    ...
    const storeToPass = mapStateToProps(store)
    return class extends React.Component {
        render(){
            <WrappedComponent {...this.props, ...storeToPass} />
        }
    }
}

并这样称呼：Connect(MapState, CustomComponent)

有什么区别吗？

Answer 1

一方面，connect接受（最多）四个参数：mapStateToProps，mapDispatchToProps，mergeProps和options。 https://react-redux.js.org/api/connect#connect

当然，从理论上讲，功能签名可以翻转到connect(Component, mapStateToProps, mapDispatchToProps, mergeProps, options)。

但是，文档中给出的原因：

您可以使用hoc来使不同的组件获得相同的行为

他们的示例给出了两个不同的组件登录/注销操作：

// first call: returns a hoc that you can use to wrap any component
const connectUser = connect(
  mapState,
  mapDispatch
)

// second call: returns the wrapper component with mergedProps
// you may use the hoc to enable different components to get the same behavior
const ConnectedUserLogin = connectUser(Login)
const ConnectedUserProfile = connectUser(Profile)

https://react-redux.js.org/api/connect#connect-returns

Answer 2

有点晚了，但是除了@anthonygood的回答，还有另一个原因与使用多个HOC有关。请参阅关于HOC的react文档。简要地说，不必像下面那样直接从HOC上的REACT文档摘录的代码片段中所示，就可以组成它们，而不必链接到HOC。

// Instead of doing this...
const EnhancedComponent = withRouter(connect(commentSelector)(WrappedComponent))

// ... you can use a function composition utility
// compose(f, g, h) is the same as (...args) => f(g(h(...args)))
const enhance = compose(
  // These are both single-argument HOCs
  withRouter,
  connect(commentSelector)
)
const EnhancedComponent = enhance(WrappedComponent)

Answer 3

react库之后，引入了react中的HOC概念。函数本身被称为反应中的组件。因此，您知道这笔交易；更改已经发布的所有内容非常复杂。如果必须执行反应挂钩的实现方式，那么大多数软件都将需要进行重大更改。

Answer 4

Connect返回一个函数，因为该函数必须非常灵活，这又意味着它必须采用许多自定义选项作为参数。当然，CustomComponent可能只是传递给Connect的另一个参数，这样您就可以拥有HOC(CustomComponent, option1, ...optionN)。

Redux创作者采取的另一个更巧妙的选择是将所有自定义选项作为参数分别传递给Connect，并获得另一个已经自定义的功能。然后，此自定义函数将CustomComponent作为唯一参数。

React Redux Connect是否有任何原因直接返回函数而不是组件？

4 个答案: