JavaScript 函数和 React 钩子有什么区别？答案

【问题标题】：What's the difference between a JavaScript function and a React hook?JavaScript 函数和 React 钩子有什么区别？
【发布时间】：2019-12-26 12:04:33
【问题描述】：

我一直在考虑编写自己的 React 钩子，但到目前为止，我一直在努力从技术层面上说明普通 JavaScript 函数和钩子之间的区别。

例如，this 文章说钩子是“可以在其中使用其他钩子的普通 JavaScript 函数”，但幕后还有什么？

我知道我们在钩子名称中使用了 use 这个词，但我很好奇钩子是什么让它们成为钩子而不是函数！

【问题讨论】：

自定义钩子通常会调用其中的其他钩子。
谢谢，但我不能只用函数来做吗？
请看文档中的这个例子：reactjs.org/docs/hooks-custom.html#extracting-a-custom-hook
使函数成为钩子的是 React 以某种方式跟踪函数调用。这允许 React 在函数调用之间保持状态（通用状态，而不是 React 状态）。换句话说，React 能够将函数调用（及其输入和输出）与特定的 React 元素相关联。
请记住，钩子在基因上是作为回调实现的。那就是框架调用您向其注册的特定函数。因此，您将根据 react 的定义编写具有正确类型的钩子，并通过传递对要响应的函数的引用来告诉 react 调用该函数。

标签： javascript reactjs react-hooks

【解决方案1】：

是什么让钩子成为钩子而不是函数！

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

反应团队有implemented 10 of these functions。他们让你做一些事情，比如管理状态或运行副作用。您可以按照自己喜欢的方式混合和匹配它们，如果您将代码放入辅助方法中，这称为“自定义挂钩”。

【讨论】：

【解决方案2】：

React 钩子与 JavaScript 函数没有任何不同。引入它们是为了将类组件的功能赋予功能组件。

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

【讨论】：

谢谢，但是如果是这种情况，为什么我不能只编写从我的功能组件内部调用的函数而不是使用钩子呢？
我猜你可以在函数组件之外声明函数并使用它们。如果在功能组件内部声明函数，它会在每次渲染中定义，不会被重用。我们可以使用 useCallback 钩子来记忆函数，使其在一定程度上可重用。

【解决方案3】：

简单解释：

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

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

【讨论】：