对自定义钩子和普通函数进行反应，有什么区别

Question

我正在尝试将我的头缠在自定义钩子上。我了解普通钩子就可以了，但是我的问题是，在编写自定义钩子时，它与普通函数有什么区别？我的意思是为什么不叫它正常的功能而不是像use *

Answer 1

反应挂钩（自定义或非自定义）应以use前缀开头。以及，根据React文档：

1）只能从React代码中调用钩子，而不能从常规JS函数中调用钩子。因此，Hooks的范围仅限于React代码世界，并且有更多的能力来处理React代码。可以在整个应用程序中使用常规函数，而不是JS，但由于React代码指南使代码更加对齐以响应React语法。

2）在基于类的组件中，钩子将不起作用，而常规函数将起作用。

3）在常规JS函数中，您无法访问useState，useEffect，useContext等，但是在react自定义钩子中可以。

Answer 2

从React docs：

自定义挂钩是一个JavaScript函数，其名称以“ use”开头，并且可以调用其他挂钩。 [...]其名称应始终以“ use”开头，以便您一眼就能知道rules of Hooks适用于它。

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

1。）它告诉消费者，这些功能旨在与React一起使用并遵守隐式合同（上述规则）。

2。）您可以使用工具支持来检查和执行这些规则。例如，eslint-plugin-react-hooks使用了一个heuristic，该假设假定一个函数以“ use”为前缀，并在其为Hook后使用大写字母。

Answer 3

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

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

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

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

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

Answer 4

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

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

Answer 5

我相信没有人能完全回答您的问题。我仍然仍然了解拥有此称为钩子的额外功能的好处和目的，但是我仍然可以分享我的理解。

React Hooks是具有react功能的JS函数，这意味着您可以添加一些逻辑，也可以将其添加到普通JS函数中，而且还可以使用诸如useState，useEffect等本机钩子，启动该逻辑，添加其状态或添加其副作用，备注或更多内容。 因此，我相信钩子确实是一件好事，以一种隔离的方式来管理组件的逻辑。

因此，您可以拥有一个foo.component.js（UI），一个useFoo.js（logic），其中useFoo可能包含许多js函数和一个用于管理该函数并返回其预期内容的钩子。

这是一个关于反应挂钩的精彩视频，值得推荐

https://youtu.be/J-g9ZJha8FE