將 React HOC 用於功能組件

Question

我指的是以下鏈接（部分：功能組件的 HOC） https://rossbulat.medium.com/how-to-use-react-higher-order-components-c0be6821eb6c

在示例中，以下是 HOC 的代碼；

//functional HOC with useState hook
import React, { useState } from 'react';
function withCountState(Wrapped) {
   return function (props) {
      const [count, setCount] = useState(0);
  
      props['count'] = count;
      props['setCount'] = setCount;
      return <Wrapped {...props} />;
   }
}

此外，包裝的組件代碼如下；

const Wrapped = (props) =>  {
   const {count, setCount} = props;
   return(
     <div>
        <h1>Counter Functional Component</h1>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>
           Increment count
        </button>
     </div>);
};

為了應用 HOC，我們使用

const EnhancedWrapped = withCountState(Wrapped);

現在我有兩個問題；

1. 為了使用這個組件，我們只是說<EnhancedWrapped>可能在我們的 App.js 中還是我們需要其他任何東西？
2. 我們真正從創建這個 HOC 中得到什么好處？

Answer 1

越南已經回答了你的問題。 HOC 是一種通過組合使您的組件可重用的方法。 您可以擁有由 HOC 包裝的其他組件，現在它們可以訪問 count 和 setCount 功能。

根據您要完成的任務，考慮 HOC 的陷阱並考慮替代模式也是一個好主意，例如：

• 渲染道具：渲染道具上的反應文檔
• 在自定義掛鈎上使用自定義掛鈎而不是 HOC 文章

使用 React Hooks 時，我個人更喜歡制作自定義鈎子而不是使用 HOC。 並且根據用例，如果多個組件需要共享 state，您可能需要檢查 React Context 是否有意義。

Answer 2

1. 對於使用這個組件，我們只是說可能在我們的 App.js 中還是我們需要其他任何東西？ 是的，只需像使用任何其他 JSX 組件一樣使用 HOC。

2. 我們真正從創建這個 HOC 中得到什么好處？ 您可以使其可重復使用。 假設您想要另一個內部具有不同內容的組件，例如，您可以通過const AnotherEnhancedWrapped = withCountState(AnotherWrapped);