javascript - React 函数高阶组件

Question

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

我正在尝试创建一个示例功能 HOC。我正在使用 React hook 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);

当我运行它时，出现以下错误。

无效的 Hook 调用。钩子(Hook)只能在函数组件的主体内部调用。发生这种情况可能是由于以下原因之一:

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 是一个返回 React 组件的函数，这就是为什么当你将该行放入返回的函数组件中时它会起作用。

话虽如此，我会重新考虑在使用钩子(Hook)时是否需要 HOC，HOC 的目的是跨组件共享逻辑，钩子(Hook)解决了相同的挑战(以更好的方式)。

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

来自文档:

Traditionally in React, we’ve had two popular ways to share stateful logic between components: render props and higher-order components. We will now look at how Hooks solve many of the same problems without forcing you to add more components to the tree.