javascript - 为什么我不能将其转换为自定义 React hook？

Question

我的 React 应用程序中有一个薄薄的“服务层”，我用它来推送尽可能多的业务逻辑，并保持我的组件干净。

我一直使用普通函数来实现这一点 - 传递参数并执行所有步骤(读/写数据、格式化内容等)

但是，现在我对钩子(Hook)有了更多的熟悉，我想知道是否可以将这些函数视为钩子(Hook)，以使我的生活更轻松。例如，我希望能够在需要时从该服务层访问存储在上下文中的用户对象。

像这样:

import { useContext } from "react";

import { AppContext } from "../component/global/app_context";

const Save = async link => {
    let { user } = useContext(AppContext); //bombs on this line!
    
    //...do stuff...
    
    return true;
};

export default Save;

然后我会这样调用它:

const onEditSave = async link => {
    let updateRes = await Save(link);
    ...do other things...redirect, etc.
};

我不断收到可怕的“Hooks 只能在函数组件的主体内部调用”错误，所以我很自然地做错了一些事情。我只是不明白为什么这个函数不能转换为钩子(Hook)。我该如何使用它？这是一个愚蠢的想法吗？如果它很愚蠢，我可以拉动用户并将其传递给这个函数......只是我经常这样做，将其放入组件中似乎很乏味且毫无意义他们自己。

除了用于显示 React 组件的函数之外，是否有更简单的方法从普通函数访问上下文值？

Answer 1

你当然可以做你想做的事!只是你需要编写一个自定义钩子(Hook)。您可以在函数组件中调用 React 钩子(Hook)和其他钩子(Hook)内部。

一种常见的模式是从自定义 Hook 返回使用其他 Hook 值的函数。

就您而言，我认为最好的方法是编写一个自定义 Hook ，使您可以访问您创建的 AppContext 以及其他“实用程序”。

类似这样的事情。

// Inside component/global/app_context
import React, { useContext } from "react";

const AppContext = React.createContext()

const useAppContext = () => {
    const context = useContext(AppContext);
  
    function saveUser() {
        // ...do stuff with appContext.user ...
    }

    return {
      ...context,
      saveUser,
    }
}

export default useUserContext;

然后你可以像这样访问它:

const MyComponent = () => {
    const {user, saveUser} = useAppContext()
    //...rest of component
}

使用这种模式你可以走得很远。这么强大的力量!