What is React Hook? How is it different from a normal function?

什么是 React Hook？与普通函数有什么不同？

@ React

前言

有六角学院的同学问：「要如何区分 Hook 与方法的差别？什么情况下在 React 里称为 Hook？什么时候才只能称为方法？」于是写这篇文章来解释清楚。

什么是 React Hook？

可以先从 React 官方说明🔗来看：

让你可以从 function component『hook into』React state 与生命周期功能

简单来说 React 是一台大机器，通过 Hook API 我们可以与内部的数据和逻辑互动。就是 React 将他们的 API 称作 Hook 而已，就是这么简单 😎。此外除了使用 React 提供的 Hook 之外也可以自制 Hook，只需要创建一个以「use」为开头命名的 JavaScript Function，并遵循 Hook 的使用规则🔗即可。

举例来说，你写腻了每次都要使用 useEffect 来戳外部 API，因此制作了一个 useFetch🔗 的自定义 Hook，来消除重复的代码，并且整理这部分的逻辑为一个 Hook。

总结

React Hook 是 React 的 API 称呼，自定义 React Hook 就是使用了 React Hook 的函数。

  • 对象中的函数通常都会被称作「方法」。
  • React Hook 就是 React 的 API，使用它来与 React 互动。
  • 自定义 React Hook 就是使用 React Hook 来撰写自定义功能的函数。