反应自定义钩子与普通函数，有什么区别

Question

我正试图将我的头包裹在自定义钩子上。我理解普通钩子很好，但我的问题是，在编写自定义钩子时，它与普通函数有什么区别？我的意思是为什么不称其为普通函数而不是将其称为 use*

Answer 1

有一些差异和问题使得我们使用 React 自定义钩子：

1. 首先，如果使用普通函数，每次重新渲染组件时，都会再次创建该函数，从而导致性能下降。您可能认为可以通过使用useCallBackmake React 来修复它，而不是每次重新渲染时都创建一个新函数，但这不是我们要解决的主要问题。
2. React 文档通过一个跟踪在线好友的简短示例讨论了主要问题，即避免在不同的功能组件中复制粘贴相同的逻辑，因为它们也需要有状态。
3. 如果我们在组件内使用普通函数并使用useCallBack以避免每次创建新函数，我们并没有解决问题，因为在每个组件中我们也应该复制这个逻辑，所以这并没有解决问题。
4. 另一种解决方案是在功能组件外部创建一个函数来处理此逻辑，但存在一个大问题：在组件外部的普通函数中，我们无法访问状态，因为正如我们提到的，此实现的逻辑是有状态，我们只能在 React 组件中访问状态。

那么这里的解决方案是什么呢？是的，自定义 React Hook！

1. 它是一个有状态函数，使用其他 React 内置钩子（例如useState等useCallback），可以包装您想要在一个地方收集的有状态逻辑，并避免在多个组件中复制和粘贴相同的逻辑。
2. 通过这种方法，您可以将逻辑放在组件之外的另一个函数中，同时获得 React 有状态功能的好处。

我希望这个答案可以解决您的问题并消除您的歧义。

Answer 2

React Hooks（自定义或非自定义）应该以use前缀开头。此外，根据 React 文档：

1) 钩子应该只从 React 代码中调用，而不是从常规 JS 函数中调用。因此，Hooks 的范围仅限于 React 代码世界，并且有更多的能力来处理 React 代码。与 JS 不同，常规函数可以跨应用程序使用，但作为 React 代码指南，可以使代码更符合 React 语法。

2) 在基于类的组件中，Hooks 不会工作，但常规函数会。

3）在常规JS的功能，则无法访问useState，useEffect，useContext等，但在反应定制钩我可以。

Answer 3

我相信没有人准确回答过你的问题。我仍然理解拥有这个称为 hooks 的额外功能的好处和目的，但我仍然可以分享我的理解。

React Hooks 是具有 React 强大功能的 JS 函数，这意味着您可以添加一些逻辑，您也可以添加到普通 JS 函数中，而且您还可以使用原生钩子，如 useState、useEffect 等，来提供支持提高逻辑，添加状态，或添加副作用，记忆或更多。所以我相信钩子是一个非常好的东西，可以以隔离的方式管理组件的逻辑。

所以，你可以有一个 foo.component.js (UI)，一个 useFoo.js(logic)，其中 useFoo 可能包含许多 js 函数和一个钩子来管理这些函数并返回它应该的东西。

这是一个关于react hooks的精彩视频，强烈推荐

https://youtu.be/J-g9ZJha8FE

Answer 4

来自 React文档：

自定义 Hook 是一个 JavaScript 函数，其名称以“use”开头，并且可以调用其他 Hook。[...] 它的名字应该总是以“use”开头，这样你就能一眼看出Hooks的规则适用于它。

那么为什么要使用特殊的“use”命名前缀来定义自定义 Hooks 呢？

1.) 它告诉消费者，这些函数旨在与 React 一起使用并遵守隐式契约（上述规则）。

2.) 您可以获得检查和执行这些规则的工具支持。例如，eslint-plugin-react-hooks利用一个启发式假设，一个以“use”前缀开头的函数是一个钩子。

Answer 5

自定义挂钩依赖于另外一个挂钩。根据设计，React hooks 旨在从组件的 render 方法中使用。如果您尝试在其他地方使用挂钩，您将收到警告。自定义挂钩遵循与内置挂钩相同的约定，因为它们必须以相同的方式使用。前缀use只是一个约定，用于标识通常在组件渲染方法的最顶部调用的钩子函数。

您可以将您的钩子函数命名为您想要的任何名称，但正如我提到的，如果在渲染方法之外使用，您将会收到来自 React 的警告。