React 是一种声明式的、高效的 JavaScript 库，广泛应用于构建现代单页面应用程序（SPA）。近年来，React Hooks 成为 React 生态系统中的一大亮点，它是一种新的 API，可以方便地重用有状态逻辑代码。本文将详细讲解 React Hooks 的使用方法，并带领读者实现一些有用的功能。
什么是 React Hooks
React Hooks 是 React v16.8.0 中推出的一项新功能，用于让开发者在函数组件中使用 React 的状态(state)及其他特性。在 React 之前，开发者一般使用 Class 组件来管理相应的状态及生命周期函数，类组件中的局部状态(state)是不可避免的。但类组件难以解决以下问题：
- 复用状态逻辑（避免 HOC（高阶组件）和 render props 嵌套地狱）
- 大型组件变得难以维护和理解（MVC、Redux 的大工厂）
- 类组件中某些生命周期函数的复杂性和执行顺序不可预测
React Hooks 的出现，通过函数组件方式，碾压了类组件，大大简化开发组件的方式，让开发者更专注于业务而非模板代码。
React Hooks的种类
React Hooks 中有两种常用的 Hooks，分别为 useState 和 useEffect。
useState
useState 是一个函数，它的作用是在函数式组件之间存储 state 数据。useState 返回一个数组，其中第一个变量是当前值，第二个变量使一个函数，用于更新这个值。
让我们来看个实例。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
------ -
-----
------ ------- ------- ---------
------- ----------- -- -------------- - ----
----- --
---------
------
--
-在上面的代码中，setCount 是修改 count 变量的函数，当 button 组件的 onClick 事件触发时，就会调用 setCount 函数来更新 count 变量的值。
useEffect
useEffect 是第二常用的 Hook，它在组件渲染后执行副作用操作。useEffect 第一个参数是一个函数，它会在组件挂载时执行，并在每次组件更新时重新执行。USeEffect 的第二个参数是组件被监听的变量的数组，如果监听到了某个变量的值发生变化，effect 函数就会重新执行。
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
-------- -------------------- -
----- ------- --------- - ------------
------------ -- -
-- -----
-------------- - ---- ------- -------- -------
-- ---------
------ -
-----
------ ------- ------- ---------
------- ----------- -- -------------- - ----
----- --
---------
------
--
-在上面的代码中，我们监听 count 变量，每次 count 变量的值改变，useEffect 就会重新执行副作用函数，改变网页的标题。
如何编写自己的 Hook
自定义 Hook 可以帮助我们重用逻辑代码，通常一个自定义 Hook 函数会包含多个 React Hook 函数的组合。
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
-------- --------------- -
------------ -- -
-------------- - ---- ------- -------- -------
-- ---------
-
-------- -------------------- -
----- ------- --------- - ------------
--
-------- ---- -- ---------
----------
--
----------------
------ -
-----
------ ------- ------- ---------
------- ----------- -- -------------- - ----
----- --
---------
------
--
-在上述代码中，我们自定义了一个 useTitle 函数，在组件中使用。由于其中仅仅使用了 React Hooks 函数，我们也能将它放在 React Hook 模块中。
当然，我们自定义的 Hook 可以用在不同的组件上，让我们将组件中重复的逻辑提取到自定义 Hook 中。
总结
React Hooks 提供了一种新的 API，使得开发者可以更好的使用函数组件处理有状态逻辑。useState 和 useEffect 是 React Hooks 两个常用的 Hook。自定义 Hook 可以帮助开发者复用逻辑代码，提高开发效率。
在这里，我希望可以给初学者提供一份详细且有深度的 React Hooks 使用指南。当然，本文仅仅是一个入门级别的文章，想要更深入的理解还需要阅读 React 官方文档及相关网站教程。如果你想加入 React 技术社区，欢迎留言和评论区，和我们一起探讨 React 在前端领域的应用！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fbea80f6b2d6eab31fa3ff