React - 何时使用钩子，何时使用 HOC

Posted 2023-02-22

【中文标题】React - 何时使用钩子，何时使用 HOC

【英文标题】：React - When to use hooks, and when to use HOCs

【发布时间】：2021-06-30 12:26:56

【问题描述】：

我们什么时候应该在 HOC 上使用钩子，以及在 React 中使用 HOC 而不是钩子？

例如，我可以完美地拥有一个用于管理身份验证状态的钩子，然后在组件中使用它......但我也可以拥有一个 HOC 来管理身份验证状态并包装组件以使用其逻辑。

那么...有什么规则可以知道您对实现 HOC 还是 hook 感兴趣？

【问题讨论】：

我认为这可能是一本好书medium.com/javascript-scene/…

【参考方案1】：

为什么要使用 HOC？

当您想将其他行为注入现有组件时，HOC 很有用。可以使用 HOC 注入：

React 生命周期（例如，在 componentWillMount 中执行代码） 状态 （例如 react-redux 的连接） 3 组件（父组件、子组件 组件，同级组件）样式

为什么选择 React Hook？

如果你写了一个函数组件，然后你想给它添加一些状态，之前你通过将它转换为一个类来做到这一点。但是，现在您可以通过在现有函数组件中使用 Hook 来实现。

【讨论】：

用 HOC 注入状态和在组件中使用钩子有什么区别？我的意思是，在这两种情况下，逻辑都在组件之外。

我的意思是，将状态管理移动到自定义钩子和 HOC 之间的区别。