React Hooks 是 React 16.8 中新增的功能，它们是一种用于实现具有状态的 React 组件的方式。使用 Hooks，您可以在不编写类组件的情况下处理 React 组件中的状态。虽然 React Hooks 是一个比较新的功能，但它已经在社区中成为了一个很受欢迎的选项。
在本文中，我们将介绍如何使用 ES2020 深入学习 React Hooks。我们将研究不同类型的 Hooks，同时讨论如何在实际应用中使用它们。
前置知识
在本文中，我们假设您已经有了以下知识：
- React 基础概念，包括组件、Props 和状态。
- ES2020 新功能中的一些基础部分，如箭头函数、模板字面量和解构赋值。
useState
使用 useState，您可以在函数组件中存储和更新状态。useState 是 React Hooks 中最基本的 Hook 之一，也是最常用的一个。
为了使用 useState，您需要将它导入到模块中，例如：
import React, { useState } from 'react';在此之后，您可以使用 useState 创建 React 组件的状态。useState 的用法和 setState 有些相似，但它不需要您指定对象属性的名称。相反，useState 在函数组件中声明一个属性，然后返回一个由当前状态和一个可更新状态的函数组成的数组。如下所示：
const [count, setCount] = useState(0);
在此示例中，count 是状态属性的名称，而 setCount 是一个函数，它用于更新此状态的值。函数 useState(0) 初始值为 0。
下面，我们来看一个完整的例子：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------- -------- ----- -
----- ------- --------- - ------------
-------- ---------------- -
-------------------- -- --------- - ---
-
-------- ---------------- -
-------------------- -- --------- - ---
-
------ -
-----
---------- ------------
------- -------------------------------------------
------- -------------------------------------------
------
--
-在此示例中，我们定义了一个名为 App 的组件，并使用 useState 创建了一个名为 count 的状态。我们为这个状态创建了两个函数，分别是 incrementCount 和 decrementCount。这两个函数用于更新 count 的值。在返回(render)中，我们显示了 count 的值，并在页面上创建了两个按钮，用于更新 count 的值。
useEffect
useEffect 是另一个常用的 Hook，它类似于 componentDidMount 和 componentWillUnmount 组合。使用 useEffect，您可以在函数组件中执行 “副作用” 操作，例如订阅事件、更新 DOM 和执行异步操作等。
为了使用 useEffect，您需要将它导入到模块中，例如：
import React, { useEffect } from 'react';在本示例中，我们表示了一个已获得的电影数据，并使用 useEffect 在组件渲染之后向 API 进行呼叫。在组件的函数命名为初始化时，我们使用了 useEffect 以获取电影数据：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
------ ----- ---- --------
------ ------- -------- ----- -
----- -------- ---------- - -------------
------------ -- -
----------------------------------------------------------- -- -
-------------------------
---
-- ----
------ -
----
------------------- ------ -- -
--- ------------------------------
---
-----
--
-useContext
使用 useContext，您可以轻松地在React中实现组件之间的状态共享而无需进行逐级属性传递。
使用 useContext，你需要定义一个 context 对象，该对象将被传递给 useCountext 以便在不同的组件中访问最重要的数据。
在下面的示例中，我们将用 useContext 共享 user 对象：
先声明一个"用户"的 Context。
import { createContext } from 'react';
export const UserContext = createContext();接着在合适的地方，创建这个 Context 并包裹在需要共享 user 对象的组件外层。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- - ---- ------------
------ ------- -------- ----- -
----- ---- - -
----- -----
---- ---
--------- ----
--
------ -
--------------------- -------------
-------------- --
-----------------------
--
-最后，在需要访问 user 对象的组件中使用该 Context。
-- -------------------- ---- -------
------ ------ - ---------- - ---- --------
------ - ----------- - ---- ------------
------ ------- -------- --------------- -
----- ---- - ------------------------
------ -
-----
------ ---------------
------ --------------
------- -------------------
------
--
-其他 Hook
除了上述三个 Hook，React Hooks 还有更多可用于改善代码结构的 Hook，包括 useReducer、useCallback 和 useMemo 等等。
在学习这些新 Hook 时，您可以使用的最佳方法之一就是在代码示例中尝试使用它们。除了官方文档外，社区的示例和课程也是学习 React Hooks 中最好的资源之一。
总结
React Hooks 是一个强大的工具，它可以帮助您在编写 React 组件时更加轻便和高效。使用这些 Hook，您可以消除代码中的重复和混乱，并将焦点放在组件自身的功能上。在使用 ES2020 深入学习 React Hooks 后，您将能够更好地处理 React 组件的状态和生命周期，并创建更加简洁和可重复使用的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6488164b48841e9894696c72