前言
React 16.8 中 hooks 的引入改变了我们构建 React 组件的方式。与旧的生命周期方法相比，它在构建复杂组件更具有优势。
钩子的一大亮点是跨组件重用代码。使用 React 的人会记得 mixins（如果你不记得这不是问题，因为它们现在已从 React 中删除！）。在那之后，人们用高阶组件和 Render Props 解决了代码重用的问题，但这些都或多或少有些问题。
高阶组件和Render Props仍然有它们的存在意义，仍然是一个好方法。
自定义钩子可以使用React钩子
- 自定义钩子只是 JavaScript 函数
- 自定义钩子可以调用 React 钩子
使用钩子重用代码变得像编写函数一样简单。将一些重复的代码并将其包装在一个函数中。自定义钩子只是具有以单词 use 开头的约定的函数：
const useCounter = () => {
const [count, setCount] = useState(0)
useEffect(() => {
const id = setTimeout(() => {
setCount(c => c + 1)
}, 500)
return () => clearTimeout(id)
})
return count
}
与普通JS 函数的方式进行比较：
const counter = () => {
let count = 0
setTimeout(() => {
count = count + 1
}, 500)
return count
}
虽然 hook 版本包含一些 React 细节（即 useState 和 useEffect 调用），但逻辑在很大程度上是相同的。
使用钩子的好处
现在我们系统中的任何组件都可以轻松使用 useCounter 钩子，如果我们想更新该逻辑，我们可以在一个地方完成。
钩子还有另一个好处（也适用于 JS 函数）：隐藏实现细节。我认为这是一个如此大的好处的原因是，当你在处理代码库时，您正在开发一个恰好使用 useCounter 钩子的组件，并且该组件是由别人编写的。不必关心或担心它是如何工作的。你只看到：
const count = useCounter()
它会给你一个 count 。将这一行与上面实现 useCounter 钩子的 10 行进行比较。更精简，也不会不理解 .
钩子的美妙之处在于它们让你可以依靠功能而不用关心它是如何工作的。 高阶组件 和 Render Props 也是这样做的，但是他们引入了更多的仪式和工作来做到这一点。钩子只是函数调用。
何时创建自定义钩子
- 您的代码逻辑至少在两个组件中完全相同，否则不要创建挂钩。
- 不要创建过于复杂的钩子，一个钩子只专注做好一件事。
全文完
谢谢！
开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 18 天
