React 函数高阶组件

Question

高阶组件不适用于功能组件。

我正在尝试创建一个示例功能 HOC。我正在使用反应钩子 useState 并将状态传递给传递的组件。下面是我的代码

function HOC(WrapperComponent) {
  // outside of return function
  const [course] = useState({ id: 0, name: "Raja/Kondla" });
  return function() {
     return <WrapperComponent course={course} />;
  };
}

const Comp = HOC(({ course }) => {
  return (
    <>
      <div>HOC</div>
      <div>{course.id}</div>
      <div>{course.name}</div>
      <div>-------------------</div>
    </>
  );
});

ReactDOM.render(<Comp />, rootElement);

当我运行它时，我遇到了错误。

无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一：

1. 您的 React 和渲染器版本可能不匹配（例如 React DOM）
2. 您可能违反了 Hooks 规则
3. 您可能在同一个应用程序中拥有多个 React 副本

但是如果我把下面的代码作为 HOC 工作正常。

function HOC(WrapperComponent) {
  return function() {
      // inside return function
    const [course] = useState({ id: 0, name: "Raja/Kondla" });
    return <WrapperComponent course={course} />;
  };
}

得到结果输出：

HOC
0
Raja/Kondla

谁能解释一下是什么原因？并且使用函数式 HOC，会不会对性能产生影响？

提前致谢

Answer 1

您的 HOC 是一个返回反应组件的函数，这就是当您将行放在返回的函数组件中时它可以工作的原因。

话虽如此，我会重新考虑使用钩子时对 HOC 的需求，HOC 的目的是在组件之间共享逻辑，钩子解决了同样的挑战（以更好的方式）。

很难理解您在示例中尝试与您的 HOC 分享什么逻辑，但我会选择 custom hook instead。

来自文档：

传统上，在 React 中，我们有两种流行的方式来共享有状态 组件之间的逻辑：渲染道具和高阶组件。我们 现在将看看 Hooks 如何解决许多相同的问题 强制您向树中添加更多组件。

Answer 2

你写的HOC函数好像错了。

它应该返回一个有效的反应组件时返回一个函数。一种看待它的方式是，当你的 HOC 被调用时会发生什么？ 它会返回什么？我想如果你问自己这些问题，你会得到自己回答。

function HOC(WrapperComponent) {
  // outside of return function
  const [course] = useState({ id: 0, name: "Raja/Kondla" });
  return function() {
     return <WrapperComponent course={course} />;
  };
}

这不会返回一个有效的 React 组件，而是返回一个函数

另一方面：

function HOC(WrapperComponent) {
  return function() {
      // inside return function
    const [course] = useState({ id: 0, name: "Raja/Kondla" });
    return <WrapperComponent course={course} />;
  };
}

这会返回一个有效的 React 组件。

我希望这能回答你的问题。