9、React Hooks：高级用法与自定义实现

React Hooks：高级用法与自定义实现

在 React 开发中，Hooks 是管理状态和组件生命周期的强大工具。下面将详细介绍一些常用 Hooks 的使用方法，以及如何创建自定义 Hooks。

1. useEffect() 钩子的条件执行

useEffect() 钩子可根据条件控制副作用的执行：
- 无条件 ：每次显示或更新后运行，若每次组件更新都执行不必要的副作用，可能导致性能下降。
- 空条件数组 ：仅在初始渲染后运行一次，适用于初始化操作，但不响应更新。
- 带值的条件数组 ：在初始显示和数组中的值在更新之间发生变化时运行，通过仅在必要时触发副作用来优化执行，提高应用性能。

2. useReducer() 钩子的使用

useReducer() 钩子用于在不使用 useState() 的情况下管理组件中的响应式变量。

2.1 计数器组件使用 useState()

以下是使用 useState() 管理响应式变量 “value” 的 App 和 Counter 组件代码：

// src/App.js
import logo from './logo.svg';
import './App.css';
import Counter from "./Counter.js";