时间戳

首页 > 解决方案 > 为了钩子的目的，被称为 HOC 等同于常规组件吗？

reactjs - 为了钩子的目的，被称为 HOC 等同于常规组件吗？

问题描述

所以有两种可能的方式来使用 React hooks：

  1. 直接地
const Signup = props => {
  const [onSubmit, {data}] = useMutation (SIGNUP_GQL)
  return (
    ...
  )
}
export default Signup
  1. 在 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 中使用钩子。

干杯!

标签： reactjsreact-hooks

解决方案

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

有了钩子，你现在可以做大部分你需要用 HOC 做的事情。甚至所有流行的具有复杂逻辑的反应库都可以重构为使用钩子。例如：react-apollo, react-router等。

在大多数情况下，与 HOC 相比，钩子的开销应该更低，从而提高性能。参考

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

但是，这并不是说类组件不再有用。目前还有一些情况是用 hooks 做不到的，比如做componentDidCatch,getDerivedStateFromProps等。但在大多数情况下，钩子 + 函数组件应该足够了。

推荐阅读