React 函数高阶组件

Posted 2023-02-23

【中文标题】React 函数高阶组件

【英文标题】：React Function Higher Order Component

【发布时间】：2019-12-15 00:01:15

【问题描述】：

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

我正在尝试创建一个示例功能 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） 您可能违反了 Hooks 规则 您可能在同一个应用程序中拥有多个 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，会不会对性能产生影响？

提前致谢

【问题讨论】：

你一定要看看这个reactjs.org/docs/higher-order-components.html

´HOC(( course )´ 你的意思是写 ´HOC((course)´ 吗？

【参考方案1】：

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

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

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

来自文档：

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

【讨论】：

感谢您提供额外信息。我认为只有 HOC 和 rener props 是编写可重用逻辑的唯一选择。但是自定义挂钩是我们的第三个选项。

@RajaKondla 是的，不仅是第三种选择（如果算上旧的 mixins，则是第 4 种），也是最强大的一种。使用 HOCS 或渲染道具，您可以返回一个反应元素，使用钩子（与 mixins 相同），您可以返回任何您想要的东西。我认为它是一个新的反应原语（构建块）

感谢分享信息。我在想，如果我们想使用 HOC 或渲染道具以实现可重用性，我们应该使用类组件，如果我们想使用功能性组件来实现可重用性，我们应该使用自定义钩子。这就是我现在发现的不同之处。这是正确的吗？如果这个问题没有任何意义，请告诉我。

@RajaKondla 实际上，如果您使用 react v16.8（例如带有钩子的那个），我认为根本没有使用类的有效用例。正如我所说，钩子比 HOCS 或渲染道具更强大和灵活。你可以使用 HOCS 或渲染道具可以做的任何事情，但反之则不行。

谢谢。您正在提供更有效的信息。我将尝试深入研究反应。再次感谢。

【参考方案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 组件。

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

【讨论】：

谢谢。我想到了错误消息，但没有想到其他方式。