React Redux Connect returns 是一个函数而不是一个组件，有什么原因吗？

Question

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

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

你可以这样称呼：HOC(CustomComponent)

然而，许多流行的库包括 react-redux，而不是 return 一个反过来 return 组件的函数：

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

你可以这样称呼：connect(mapState)(CustomComponent)

我的问题是为什么？这有什么原因吗，还是只是对模式的偏好？为什么不能为连接功能执行此操作？

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

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

有区别吗？

Answer 1

react中HOC的概念是在redux库之后引入的。函数本身在 React 中被称为组件。所以，你知道这笔交易；更改已发布的所有内容非常复杂。如果它必须实现 react hook 的实现方式，那么大多数软件都需要进行错误的更改。

Answer 2

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

当然，理论上函数签名可以翻转为 connect(Component, mapStateToProps, mapDispatchToProps, mergeProps, options)。

但是，文档给出的原因：

you may use the hoc to enable different components to get the same behavior

他们的例子给出了两个不同的组件 login/logout 动作：

// 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 3

Connect return 是一个函数，因为这个函数需要非常灵活，这反过来意味着它必须将许多自定义选项作为参数。当然 CustomComponent 可能只是传递给 Connect 的另一个参数，这样你就会有 HOC(CustomComponent, option1, ...optionN).

Redux 创建者采取的另一个更简洁的选择是将所有自定义选项作为参数分别传递给 Connect，并在 return 中获得另一个已自定义的函数。然后，此自定义函数将 CustomComponent 作为唯一参数。

Answer 4

有点晚了，但除了@anthonygood 的回答之外，还有一个原因与使用多个 HOC 有关。请参阅 HOC 上的 React 文档。简而言之，不必将调用链接到 HOC，您可以按照下面直接取自 HOC 上的 REACT 文档的代码片段所示组合它们。

// 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)

React Redux Connect returns 是一个函数而不是一个组件，有什么原因吗？

Is there any reason React Redux Connect returns a function and not a component directly?

javascript

reactjs

redux

react-redux

higher-order-components