React Function高階組件

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. 您可能正在違反掛鈎規則
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組件時，它是一個返回函數。 一種查看方式是， 調用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共享什么邏輯，但是我會改用自定義鈎子 。

從DOCS：

傳統上，在React中，我們有兩種流行的方式來在組件之間共享狀態邏輯：渲染道具和高階組件。 現在，我們將看看Hooks如何解決許多相同的問題，而不會強迫您向樹中添加更多組件。