6、React Hooks 实战指南：从基础到应用

React Hooks 实战指南：从基础到应用

1. React Hooks 简介

React Hooks 是 React 16.8 版本引入的一项重要特性，它让开发者可以在不编写 class 的情况下使用 state 以及其他 React 特性。Hooks 本质上是一些函数，通过将状态和副作用逻辑与显示逻辑分离，实现组件逻辑的复用。

使用 Hooks 有两条主要规则：
- 顺序使用 ：Hooks 必须按顺序使用，不能在条件语句或循环中使用，相关的使用指令需直接放在定义组件的函数顶层。
- 仅在组件函数中使用 ：Hooks 只能在定义 React 组件的函数中使用。

常见的标准 Hooks 有：
| Hooks 名称 | 用途 |
| ---- | ---- |
| useState() | 定义响应式变量，程序中修改变量会自动更新页面上使用该变量的地方 |
| useRef() | 定义非响应式变量，程序中修改变量不会影响页面上的显示值（除非组件因其他响应式变量的修改而更新） |
| useEffect() | 定义在组件创建或特定条件下更新时执行的代码块 |
| useReducer() | 基于程序中定义的操作管理响应式变量，比 useState() 提供更多可能性 |

2. 使用 useState() Hook