javascript - 如何将此类基础高阶组件更改为功能组件？

Question

我已经在我的 React 应用程序中创建了一个 HOC，如下 this ，并且工作正常。但是我想知道是否有一种方法可以创建 HOC 作为功能组件(有或没有状态)？？？因为给定的示例是基于类的组件。

试图在网络上找到相同的内容，但什么也没得到。不确定这是否可能？或者永远做正确的事情？？

任何线索将不胜感激:)

Answer 1

我同意siraj ，严格来说 accepted answer 中的示例不是真正的 HOC。 HOC 的显着特征是它返回一个组件，而 PrivateRoute接受的答案中的组件是本身就是一个组件。因此，虽然它很好地完成了它的目标，但我不认为它是 HOC 的一个很好的例子。

在功能组件世界中，最基本的 HOC 如下所示:

const withNothing = Component => ({ ...props }) => (
  <Component {...props} />
);

调用withNothing返回另一个组件(不是实例，这是主要区别)，然后可以像常规组件一样使用它:

const ComponentWithNothing = withNothing(Component);
const instance = <ComponentWithNothing someProp="test" />;

使用此功能的一种方法是，如果您想使用临时(没有双关语哈哈)上下文提供程序。

假设我的应用程序有多个用户可以登录的点。我不想在所有这些点上复制登录逻辑(API 调用和成功/错误消息)，所以我想要一个可重用的 <Login />成分。然而，就我而言，所有这些登录点在视觉上都存在显着差异，因此可重用组件不是一个选项。我需要的是一个可重复使用的<WithLogin />组件，它将为其子组件提供所有必要的功能 - API 调用和成功/错误消息。这是执行此操作的一种方法:

// This context will only hold the `login` method.
// Calling this method will invoke all the required logic.
const LoginContext = React.createContext();
LoginContext.displayName = "Login";

// This "HOC" (not a true HOC yet) should take care of
// all the reusable logic - API calls and messages.
// This will allow me to pass different layouts as children.
const WithLogin = ({ children }) => {
  const [popup, setPopup] = useState(null);

  const doLogin = useCallback(
    (email, password) =>
      callLoginAPI(email, password).then(
        () => {
          setPopup({
            message: "Success"
          });
        },
        () => {
          setPopup({
            error: true,
            message: "Failure"
          });
        }
      ),
    [setPopup]
  );

  return (
    <LoginContext.Provider value={doLogin}>
      {children}

      {popup ? (
        <Modal
          error={popup.error}
          message={popup.message}
          onClose={() => setPopup(null)}
        />
      ) : null}
    </LoginContext.Provider>
  );
};

// This is my main component. It is very neat and simple
// because all the technical bits are inside WithLogin.
const MyComponent = () => {
  const login = useContext(LoginContext);

  const doLogin = useCallback(() => {
    login("a@b.c", "password");
  }, [login]);

  return (
    <WithLogin>
      <button type="button" onClick={doLogin}>
        Login!
      </button>
    </WithLogin>
  );
};

不幸的是，这不起作用，因为 LoginContext.Provider在内部实例化 MyComponent ，等等useContext(LoginContext)不返回任何内容。

HOC 来救援!如果我添加一个小小的中间人会怎样:

const withLogin = Component => ({ ...props }) => (
  <WithLogin>
    <Component {...props} />
  </WithLogin>
);

然后:

const MyComponent = () => {
  const login = useContext(LoginContext);

  const doLogin = useCallback(() => {
    login("a@b.c", "password");
  }, [login]);

  return (
    <button type="button" onClick={doLogin}>
      Login!
    </button>
  );
};

const MyComponentWithLogin = withLogin(MyComponent);

嘭! MyComponentWithLogin现在将按预期工作。

这可能不是处理这种特殊情况的最佳方法，但我有点喜欢它。

是的，这确实只是一个额外的函数调用，仅此而已!根据官方指南:

HOCs are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature.