React 类组件可以利用带有参数的自定义钩子吗？答案

【问题标题】：Can React class components leverage custom hooks which take an argument?React 类组件可以利用带有参数的自定义钩子吗？
【发布时间】：2021-10-17 06:41:23
【问题描述】：

我知道如何在类组件中使用钩子的一种方法是拥有一个返回函数组件的 HOC，在其中我们可以调用钩子并将 prop 传递给类组件。查看How can I use React hooks in React classic `class` component? 并由 Joel Cox 回答。

现在问题来了，以https://reactjs.org/docs/hooks-custom.html#using-a-custom-hook 为例，考虑我们有一个钩子 useFriendStatus 接受一个朋友 ID，具有订阅该朋友的在线状态并在每次重新渲染时清理的效果，所以对于新的friendID，钩子可以订阅新的friendID。

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  // Effect to subscribe to online status of friendID and unsubscribe on re-render

  return isOnline;
}

类组件可以使用这样的钩子吗？在 HOC 模式中，我们利用了 hook 的挂载周期。我们可以利用 React 类组件中钩子的重新渲染吗？

【问题讨论】：

钩子仅用于功能组件。类组件通过 HOC 模式或渲染道具有自己的抽象逻辑方式。

标签： javascript reactjs react-hooks

【解决方案1】：

你真的不应该在 Class 组件中使用你的钩子（绝对不能在 componentDidMount 生命周期方法中 - 可能会引发错误），但你也不能在功能组件的 useEffect 中使用自定义 Hook（将如果您尝试，则抛出 React 错误说明）...创建的部分目的/效用更大，以便您可以从其他组件中抽象出数据获取或其他异步调用。

（如果需要，这些组件仍然可以有其他 useEffects 但不应包含自定义 Hooks）

【讨论】：