React 自定义 Hooks 和常规函数的区别答案

【问题标题】：Difference between React Custom Hooks and Regular FunctionsReact 自定义 Hooks 和常规函数的区别
【发布时间】：2021-05-19 02:31:03
【问题描述】：

常规的 JS 函数、辅助/服务函数和 React 自定义 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 钩子，例如useEffect、useState 等。那么这个函数仍然是一个自定义钩子吗？它只是一个实用程序/辅助函数吗？

当我们谈论 Custom Hooks & Utility/Helper/Service/Normal Functions 等时，到底有什么区别...

【问题讨论】：

标签： reactjs

【解决方案1】：

那么这个函数仍然是一个自定义钩子吗？它只是一个实用程序/辅助函数吗？

不，这不是一个钩子。

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

我需要先阅读Deep dive: How do React hooks really work，然后才能将头绕在钩子上。

最近我也遇到了：

【讨论】：

所以只想看看我是否正确： 1. use 只是一个前缀，用于启用 eslint 检查是否符合钩子规则。 2. 唯一区别辅助函数和钩子的是里面是否使用了其他钩子
@TKforce - afaik use 前缀只是Hooks API 本身建立的约定。该约定扩展到自定义钩子，作为函数内部使用 React Hooks API（或其他自定义钩子）的指示符 - 从而使它们也受制于Rules of Hooks。所以eslint-plugin-react-hooks 可以很好地利用这个约定。

【解决方案2】：

那么这个函数仍然是一个自定义钩子吗？它只是一个实用程序/辅助函数吗？

它以use 开头，因此如果在 React 组件中使用它，React 会将其识别为有效的自定义钩子——也就是说，可以在其中使用钩子。即使它内部没有使用任何钩子，它仍然有资格作为一个 - 但如果你不使用任何内部钩子，它是否有资格作为一个钩子本身并不重要，因为区别永远不会检查或有任何影响。

为避免混淆，我建议仅在函数实现挂钩并且是自定义挂钩时将use 添加到函数名称中。

作为docs say：

自定义 Hook 是一个 JavaScript 函数，其名称以“use”开头，并且可以调用其他 Hook。

您没有有在您的自定义挂钩中调用其他挂钩 - 但如果您的目标是首先制作自定义挂钩，您可能想要调用其他钩子，如useState。否则，调用您的自定义实用程序函数不以use开头的其他东西可能更有意义 - 尽管您是否这样做不会直接影响代码的方式运行。

【讨论】：

是的，我了解use 关键字的含义，我并不是真的要问代码是否会运行相同的内容，我只需要了解这一切背后的想法。所以当我在上面的函数中使用任何反应钩子的那一刻，它就变成了stateful，这意味着它变成了一个自定义钩子？如果没有它，它与任何普通的 JS 函数完全一样吗？这是正确的吗？
只有当你使用带有useState 的状态（或实现useState 的东西）时，它才会是“有状态的”。即使内部没有任何钩子，您的函数仍然符合自定义钩子的定义，因为它以 use 开头并在 React 组件中使用。但它令人困惑，因为一个表明它是自定义钩子的函数应该做一些只有自定义钩子才能做的事情。
@CertainPerformance “如果你在内部使用带有 useState 的状态，它只会是“有状态的”” 引号中有状态的含义是什么？我不明白为什么 OP 函数不能存储状态，如果他们愿意的话。
@GHOST-34 我指的是 OP 的措辞，当时他在评论中说此时它变成了stateful，这意味着它变成了一个自定义 Hook？ - 是的，如果他想使用useState，它绝对可以是有状态的，但他不是，所以目前它并不是真正有状态的——它只是一个函数挂钩。
@CertainPerformance 别介意它被设计成带有“use”前缀的钩子。如果不是，而且只是一个常规函数，它怎么可能不是有状态的呢？

【解决方案3】：

其实自定义钩子只是一个函数。它应该在函数名称前加上use。大多数情况下，react 提供的 hooks 会组合成功能单元，但这不是强制性的。您可以在此处查看一些实用的自定义挂钩以供参考。

https://usehooks.com/

【讨论】：