React 自定义 Hook 和常规函数之间的区别

Question

常规 JS 函数、辅助/服务函数和 React Custom Hook 之间有什么区别？

我发现的类似答案没有给出任何好的示例，因此我创建了这个“服务”函数，我将使用它来列出其他函数组件中的一些用户：

import axios from "axios";

const useService = () => {
  const fields = [
    { key: "name", _style: { width: "40%" } },
    { key: "email", _style: { width: "40%" } },
  ];

  const getUsers = async () => {
    return await axios.get("http://127.0.0.1:8000/api/users");
  };

  const getBadge = (status) => {
    switch (status) {
      case "Active":
        return "success";
      case "Inactive":
        return "secondary";
      case "Pending":
        return "warning";
      case "Banned":
        return "danger";
      default:
        return "primary";
    }
  };

  return { fields, getUsers, getBadge };
};

export default useService;

我调用了它，useService但实际上我并没有在这里使用任何 React hooks useEffect，比如useState等等。那么这个函数仍然是一个自定义 Hook 吗？它只是一个实用程序/辅助函数吗？

当我们谈论自定义挂钩和实用程序/帮助程序/服务/普通功能等时，到底有什么区别......

Answer 1

那么这个函数还是Custom Hook吗？它只是一个实用程序/辅助函数吗？

不，这不是钩子。

钩子在函数组件的调用周围使用有状态闭包来代表该组件实例存储状态。该闭包由 React 维护。

在我开始了解 Hook 之前，我需要阅读Deep Dive: How do React Hooks确实如何工作。

最近我也遇到了：

• Vanilla Hooks（React 之外）
• 简而言之，钩子