React16.8 推出了一项新特性：Hooks，这是一个让函数组件也能使用 state 和其他 React 特性的方式。它可以让我们更方便地编写 React 组件，并且使得组件的逻辑更加清晰和可重复使用。在本文中，我们将详细介绍如何使用 Hooks，并提供示例代码。
什么是 Hooks？
Hooks 是一组 React API，它们允许我们在函数组件中使用 state 和其他 React 特性。以前，如果我们需要在组件中使用 state，我们必须使用 class 组件。但是，使用 class 组件可能会导致代码变得冗长和难以理解。Hooks 的出现，使得我们可以更轻松地管理组件的状态和副作用。
useState
useState 是最常用的 Hook 之一，它允许我们在函数组件中使用 state。useState 接受一个初始状态，并返回一个数组，其中第一个元素是当前的 state，第二个元素是一个更新 state 的函数。
------ ------ - -------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
------ -
-----
------ ------- ------- ---------
------- ----------- -- -------------- - ----
----- --
---------
------
--
-在上面的代码中，我们使用 useState 来创建一个名为 count 的 state 变量，并使用 setCount 函数来更新它。每次用户点击按钮时，我们都会更新 count 的值，并在页面上显示它。
useEffect
useEffect 是另一个常用的 Hook，它允许我们在组件渲染后执行副作用操作，例如获取数据或订阅事件。useEffect 接受两个参数：一个是副作用函数，另一个是一个数组，它可以包含任意数量的依赖项。
------ ------ - --------- --------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
------------ -- -
-------------- - ---- ------- -------- -------
-- ---------
------ -
-----
------ ------- ------- ---------
------- ----------- -- -------------- - ----
----- --
---------
------
--
-在上面的代码中，我们使用 useEffect 来更新页面标题，每当 count 的值发生变化时，它都会被调用。我们将 count 数量包含在依赖项数组中，以确保只有在 count 更改时才会更新页面标题。
useContext
useContext 允许我们在组件之间共享数据，而无需通过 props 进行传递。它需要一个 Context 对象，并返回当前 Context 的值。
------ ------ - ---------- - ---- --------
----- ------------ - -----------------------------
-------- ----- -
------ -
---------------------- -------------
-------- --
------------------------
--
-
-------- --------- -
----- ----- - -------------------------
------ -
-----
------ ------- ----- -- -----------
------
--
-在上面的代码中，我们创建了一个名为 ThemeContext 的 Context 对象，并将其提供给 Provider 组件。在 Toolbar 组件中，我们使用 useContext 来获取当前主题，并将其显示在页面上。
useCallback
useCallback 允许我们缓存一个回调函数，以便在组件重新渲染时，不必重新创建该函数。这可以提高性能，特别是在传递回调函数给子组件时。
------ ------ - --------- ----------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
----- --------- - -------------- -- -
-------------- - ---
-- ---------
------ -
-----
------ ------- ------- ---------
------- --------------------
----- --
---------
------
--
-在上面的代码中，我们使用 useCallback 来缓存一个名为 increment 的回调函数。每次用户点击按钮时，我们都会调用它来更新 count 的值。
useMemo
useMemo 允许我们缓存一个值，以便在组件重新渲染时，不必重新计算该值。这可以提高性能，特别是在计算开销较大的值时。
------ ------ - ------- - ---- --------
-------- --------- -
----- --- -- - ---- ----
----- ------ - ---------- -- -
---------------------- ------------
------ - - --
-- --- ----
------ -
-----
------ ------ -- ------------
------
--
-在上面的代码中，我们使用 useMemo 来缓存一个名为 result 的值。每次 a 或 b 的值发生变化时，useMemo 都会重新计算 result 的值。这可以避免在每次重新渲染组件时都重新计算 result 的值。
useRef
useRef 允许我们创建一个可变的引用，以便在组件重新渲染时，不必重新创建该引用。这可以用来存储任意值，例如 DOM 元素或计时器 ID。
------ ------ - ------ - ---- --------
-------- --------- -
----- ---------- - -------------
----- ---------- - -- -- -
------------------ - -------------- -- -
-----------------------
-- ------
--
----- --------- - -- -- -
----------------------------------
--
------ -
-----
------- ---------------------
----- -----
---------
------- --------------------
---- -----
---------
------
--
-在上面的代码中，我们使用 useRef 来创建一个名为 intervalId 的引用。每当用户点击“Start timer”按钮时，我们会使用 setInterval 来启动计时器，并将计时器 ID 存储在 intervalId.current 中。每当用户点击“Stop timer”按钮时，我们会使用 clearInterval 来停止计时器。
总结
Hooks 是 React16.8 中的新特性，它允许我们在函数组件中使用 state 和其他 React 特性。在本文中，我们介绍了 useState、useEffect、useContext、useCallback、useMemo 和 useRef 这些常用的 Hooks，并提供了示例代码。使用 Hooks 可以让我们更轻松地编写 React 组件，并提高代码的可读性和可重复使用性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/660cc685d10417a222d1e210