React是一款流行的JavaScript库，用于构建用户界面。在React 16.8版本中引入了Hooks，它是一种新的React功能，可以让我们在无需编写类组件的情况下使用状态和其他React特性。
为什么需要Hooks？
在React之前，我们可以通过编写类组件来实现状态和其他特性。但是，这些类组件可能会变得非常复杂，尤其是当它们包含多个生命周期方法和状态时。此外，这些类组件也难以重用和测试。
React Hooks的目的是解决这些问题。通过使用Hooks，我们可以在函数式组件中管理状态和其他React特性，从而使代码更简单、易于理解、可重用和可测试。
常见的Hooks
useState
useState Hook是最常见的一个Hook之一，它允许我们在函数式组件中使用状态。例如，以下代码使用useState来跟踪一个计数器的值：
------ ------ - -------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
------ -
-----
--------- -----------
------- ----------- -- -------------- - ----------------------
------
--
-在上面的代码中，我们使用useState来声明一个名为count的状态，并将其初始值设置为0。然后，我们在渲染函数中使用count来显示当前计数器的值，并使用setCount函数来更新状态。
useEffect
useEffect Hook是另一个常见的Hook，它允许我们在组件渲染后执行副作用。例如，以下代码使用useEffect来订阅和取消订阅窗口大小事件：
------ ------ - --------- --------- - ---- --------
-------- ------------ -
----- ------- --------- - ----------------------------
------------ -- -
-------- -------------- -
----------------------------
-
--------------------------------- --------------
------ -- -- -
------------------------------------ --------------
--
-- ----
------ -
-----
--------- ------ -------------
------
--
-在上面的代码中，我们使用useState来声明一个名为width的状态，并将其初始值设置为window.innerWidth。然后，我们使用useEffect来添加和删除窗口大小事件的侦听器，并在窗口大小更改时更新状态。
useContext
useContext Hook允许我们在组件之间共享数据。例如，以下代码使用useContext来共享当前用户信息：
------ ------ - -------------- ---------- - ---- --------
----- ----------- - ----------------
-------- ----- -
------ -
--------------------- -------- ----- ------- ---
------------ --
-----------------------
--
-
-------- ------------- -
----- ---- - ------------------------
------ -
-----
-------- ---------------
------
--
-在上面的代码中，我们使用createContext来创建一个名为UserContext的上下文。然后，在App组件中，我们将当前用户信息作为值传递给UserContext.Provider。最后，在UserProfile组件中，我们使用useContext来获取当前用户信息。
如何编写自定义Hooks
除了使用React提供的Hooks之外，我们还可以编写自己的自定义Hooks。这些Hooks可以帮助我们在不同的组件中共享逻辑或状态，从而使代码更加模块化和可重用。
例如，以下是一个使用useState和useEffect Hook编写的自定义计时器Hook：
------ - --------- --------- - ---- --------
-------- ------------------ -
----- ------ -------- - ------------
------------ -- -
----- ------- - -------------- -- -
------------ -- ---- - ----------
-- ----------
------ -- -- -
-----------------------
--
-- ------------
------ -----
-在上面的代码
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/44512