出于钩子的目的，称为 HOC 等同于常规组件吗?

Question

所以有两种可能的方法可以使用 React 钩子：

1. 径直

const Signup = props => {
const [onSubmit, {data}] = useMutation (SIGNUP_GQL)
return (
...
)
}
export default Signup

2. 在 HOC 中

const withMutation = gql => C => props => {
const [onSubmit, {data}] = useMutation (SIGNUP_GQL)
return <C onSubmit={onSubmit} data={data} />
}
const Signup = ({onSubmit, data}) => (
...
)
export default withMutation (SIGNUP_GQL) (Signup)

我更喜欢第二种模式。在我以这种方式构建整个应用程序之前，我想确保它没问题。特别是，这两种模式是否基本等效(无论实现如何(，如果不是，实现是否完全支持在 HOC 中使用钩子。

干杯！

Answer 1

HOC 的主要目的之一是能够创建可重用的逻辑，并轻松地将它们注入到任何组件中。当没有钩子时，唯一可行的方法是通过渲染道具模式。

使用钩子，您现在可以完成 HOC 需要执行的大部分操作。甚至所有具有复杂逻辑的流行反应库都可以重构为使用钩子。例如：react-apollo、react-router等。

在大多数情况下，与 HOC 相比，钩子应该具有更低的开销，使其性能更高。参考

此外，通过将组件编写为函数，您可以帮助简化器更好地缩小代码，从而产生更小的捆绑包，这也是一件好事。参考

但是，这并不是说类组件不再有用。还有一些情况目前无法使用钩子，例如执行诸如componentDidCatch、getDerivedStateFromProps等操作。但在大多数情况下，钩子 + 函数组件应该就足够了。