JavaScript函数和React hook之间有什么区别？

Question

我一直在研究编写自己的React hooks，但迄今为止，我很难从技术层面上区分普通的JavaScript函数和hook之间的区别。

例如，这篇文章说hooks是“可以在其内部使用其他hooks的普通JavaScript函数”，但在幕后还发生了什么？

我知道我们在hook名称中使用单词use，但我很好奇什么使它们成为hooks而不是函数！

- Mr. Robot

---

自定义钩子通常在其中调用其他钩子。 - adiga

谢谢，但我可以用函数来做这个吗？ - Mr. Robot

请查看文档中的示例：https://reactjs.org/docs/hooks-custom.html#extracting-a-custom-hook - adiga

一个函数成为钩子的原因是React以某种方式跟踪该函数的调用。这使得React能够在函数调用之间保持状态（通用状态，而不是React状态）。换句话说，React能够将函数调用（及其输入和输出）与特定的React元素关联起来。 - Felix Kling

请记住，钩子本质上是回调函数。也就是说，框架会调用您在其中注册的特定函数。因此，您将根据React的定义编写正确类型的钩子，并通过将对该函数的引用传递给React来告诉React调用该函数。 - Robert Baron

@adiga 不是真的，在React文档中提到，自定义钩子函数里可以包含其他的钩子函数。 - Dremiq

Answer 1

钩子是函数。它们的特殊之处在于它们的目的以及它们应该在何时使用。它们的目的是为您提供一种与React组件生命周期交互的方式，并且它们的实现方式是只有在调用函数组件时才能正确工作。

React团队实现了几个这样的钩子（15 at time of writing）。它们让您做诸如管理状态或运行副作用等事情。您可以任意混合和匹配它们，如果将代码放入帮助方法中，则称为“自定义钩子”。

- Nicholas Tower

Answer 2

React Hooks 不是为了与 JavaScript 函数有所不同而引入的。它们被引入是为了将类组件的功能赋予函数组件。

例如，在函数组件中你无法进行任何形式的本地状态管理，如果需要引入状态，则必须将其转换为类组件。现在引入了 Hooks，你可以使用 useState 来赋予函数组件类组件的状态管理能力。

- Karthick B

---

谢谢，但如果是这种情况，我为什么不能只编写从我的功能组件内部调用的函数而不使用钩子呢？ - Mr. Robot

我猜你可以在函数组件外部声明函数并使用它们。如果你在函数组件内部声明函数，它将在每次渲染时被定义，不会被重复使用。我们可以使用 useCallback 钩子来记忆化这些函数，使其在一定程度上可重用。 - Karthick B

Answer 3

简单解释：

Javascript 函数 - 用于在调用或需要时向浏览器发出某些事件的方法或指令。

React Hooks - 这些也是 Javascript 函数，只是基于库的某些生命周期。React hooks 将许多方法（函数），如 componentsDidMount()、componentDidLoad() 等组合在一起，并将它们包装在一个函数中。

- Vish