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);

当我运行它时，我得到以下错误。

无效的挂钩调用。挂钩只能在功能组件的主体内部调用。发生这种情况可能是由于以下原因之一：

您可能使用的React和渲染器版本不匹配（例如React DOM）

您可能正在违反挂钩规则

您可能在同一应用中拥有多个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组件时，它是一个返回函数。一种查看方式是，呼叫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组件。

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

Answer 2

您的HOC是一个返回React组件的函数，这就是为什么当您将行放在返回的函数组件中时它起作用的原因。

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

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

从DOCS：

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

React Function高阶组件

2 个答案: