React Hooks 是 React 16.8 新增的一项特性，它能够使我们在不编写 class 的情况下使用 state 和其他 React 特性。使用 Hooks 可以让我们更简洁、更优雅地编写 React 组件，提高代码可读性和可维护性。
在本文中，我们将介绍 React Hooks 的基本用法，并结合实例展示如何在实际项目中应用 Hooks。
基本用法
React Hooks 包含多个 API，其中最常用的是 useState 和 useEffect。
useState
useState 是一个 Hook，它允许我们在函数组件中添加 state。使用 useState，我们可以像下面这样定义一个状态：
const [count, setCount] = useState(0);
上面的代码定义了一个名为 count 的状态，初始值为 0，并将其设置为一个数组，它的第一个元素是当前状态的值，第二个元素是一个更新状态的函数。
我们可以通过调用 setCount 函数来更新状态：
setCount(count + 1);
useEffect
useEffect 是一个 Hook，它允许我们在函数组件中添加副作用。使用 useEffect，我们可以在组件渲染后执行一些操作，例如订阅事件、发送网络请求等。下面是一个简单的例子：
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]);上面的代码会在每次 count 改变时更新页面标题。
应用实例
下面我们将结合实例展示如何在实际项目中应用 React Hooks。
TodoList
我们将以一个简单的 TodoList 应用为例，演示如何使用 React Hooks。TodoList 应用包括两个组件：TodoList 和 TodoItem。
TodoList
TodoList 组件用于显示所有的 TodoItem，并提供添加和删除 TodoItem 的功能。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ -------- ---- -------------
-------- ---------- -
----- ------- --------- - -------------
-------- ----------- -
------------------- - --- ------------ - -- ----- ---- ----- ----
-
-------- ---------------- -
-------------------------- -- ------- --- -----
-
------ -
-----
------- ----------------------- -------------
--------------- -- -
--------- ------------- ----------- ----------------------- --
---
------
--
-
------ ------- ---------上面的代码中，我们使用了 useState Hook 定义了一个 todos 状态，它是一个数组，每个元素包含一个 TodoItem 的 id 和 text。我们还定义了两个函数 handleAdd 和 handleDelete，分别用于添加和删除 TodoItem。在 return 语句中，我们使用 map 函数遍历 todos 数组，并将每个元素传递给 TodoItem 组件。
TodoItem
TodoItem 组件用于显示单个 TodoItem，并提供删除 TodoItem 的功能。
-- -------------------- ---- -------
------ ----- ---- --------
-------- ---------- ----- -------- -- -
-------- -------------- -
------------------
-
------ -
-----
-----------
------- --------------------------------------
------
--
-
------ ------- ---------上面的代码中，我们接收 TodoList 传递过来的 todo 和 onDelete 两个 Props，分别表示当前 TodoItem 的信息和删除 TodoItem 的函数。在 return 语句中，我们显示 todo.text 和一个删除按钮，当用户点击删除按钮时，我们调用 onDelete 函数，并传递当前 TodoItem 的 id。
总结
本文介绍了 React Hooks 的基本用法，并结合实例演示了如何在实际项目中应用 Hooks。使用 Hooks 可以让我们更简洁、更优雅地编写 React 组件，提高代码可读性和可维护性。当然，我们还可以使用其他 Hooks，例如 useContext、useReducer 等，根据不同的需求选择合适的 Hooks。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65cdfd1cadd4f0e0ff71d5c4