前言
React Hooks 是 React 官方在 2018 年发布的新特性，它通过引入新的 API 实现了在函数组件中管理复杂状态和其它生命周期功能。使用 Hooks 可以让我们更简洁、更优美地编写 React 应用，并且可以解决在 Class 组件中的一些问题。
状态钩子：useState
在函数组件中，我们通常需要存储一些状态数据，以便在渲染周期内维护它。而 useState 就是 React Hooks 提供的用于管理状态的钩子。
useState 需要传入一个初始状态，其返回值是一个数组，第一个元素为状态值，第二个元素为用于更新状态的函数。如下代码是一个简单的计数器示例：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
------ -
-----
------ ------- ------- ---------
------- ----------- -- -------------- - ----
----- --
---------
------
--
-在上面的代码中，我们通过调用 useState 来声明计数器的状态，它的初始值为 0。useState 返回的数组中，count 是状态值的名称，setCount 是用于更新状态的函数。
在 onClick 事件中，我们调用 setCount 来更新状态，当前的状态值 count 是通过加 1 得到的。
副作用钩子：useEffect
在函数组件中，我们可能要执行一些额外的操作，例如修改 DOM，定时器计数等，这些操作都称作副作用。在 Class 组件中，我们通常使用 componentDidMount、componentDidUpdate 或 componentWillUnmount 来处理副作用。但在函数组件中，React 提供了 useEffect 钩子来处理副作用。
useEffect 接受两个参数，第一个参数是副作用函数，第二个参数是副作用的依赖项。
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
------------ -- -
-------------- - ---- ------- -------- -------
---
------ -
-----
------ ------- ------- ---------
------- ----------- -- -------------- - ----
----- --
---------
------
--
-在上面的代码中，我们调用 useEffect 来实现设置 document.title 的副作用。在 useEffect 的第一个参数中，我们可以执行任何需要处理的副作用任务。
在当前示例中，我们监测 count 的值的变化，并将 count 的值渲染到 title 上，以此向用户展示当前的计数状态。
使用自定义钩子
在函数组件中，我们除了可以使用 useState 和 useEffect 钩子，也可以定义和使用其它自定义钩子。
如下面的代码展示了一个简单的自定义钩子：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
-------- ---------------- -
----- ------- --------- - ----------------------------
------------ -- -
----- ------------ - -- -- ----------------------------
--------------------------------- -------------
------ -- -- -
------------------------------------ -------------
-
---
------ ------
-
-------- ------------- -
----- ----- - -----------------
------ --------- ------ -----------
-在上面的代码中，我们定义了一个自定义钩子 useWindowWidth，它可以返回当前窗口的宽度。
在 useWindowWidth 中，我们使用了 useState 和 useEffect，并实现了一个 eventlistener 来监测窗口大小的变化。
在 MyComponent 中，我们调用 useWindowWidth 实现窗口宽度的展示。
总结
本文我们介绍了 React Hooks 的基本使用，包括 useState 和 useEffect 钩子的使用以及自定义钩子的实现。
相较于 Class 组件，使用函数组件和 Hooks 可以让我们更加简洁、优美地编写 React 应用。
如果你有任何问题或建议，请在评论区留言。
参考：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6455b65d968c7c53b091e52c