React Hooks 是 React 16.8 引入的一项重要特性，它使函数组件能够拥有类组件的一些特性，例如状态管理和生命周期方法的使用。
通过 Hooks，可以更加简洁和灵活地编写 React 组件。
React Hooks 是一种函数式组件的增强机制，它允许你在不编写类组件的情况下使用 React 的特性。主要的 Hooks 包括 useState, useEffect, useContext, useReducer, useCallback, useMemo, useRef, 和 useImperativeHandle 等。这些 Hooks 提供了访问 React 特性的方式，使得你可以更好地组织和重用你的代码。
useState
useState Hook 允许你在函数组件中使用局部状态。它返回一个状态值和更新该状态值的函数。
useEffect
useEffect Hook 允许你在函数组件中执行副作用操作（如数据获取、订阅管理、DOM 操作等）。它在每次渲染后都会执行。
以下是一些主要的 React Hooks 及其用途：
useState - 用于在函数组件中添加 state，你可以使用它来跟踪随时间变化的数据。
const [state, setState] = useState(initialState);
useEffect - 用于执行副作用操作，比如数据获取、订阅或手动更改 DOM，它与类组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 生命周期类似。
useEffect(() => {
// 执行副作用操作
return () => {
// 清理操作
};
}, [dependencies]); // 依赖数组
useContext - 用于访问 React context 在组件树中传递的数据，而不必通过每个组件传递 props。
const value = useContext(MyContext);
useReducer - 用于更复杂的 state 逻辑，它接收一个 reducer 函数和初始状态，然后返回当前的状态和派发 action 的 dispatch 函数。
const [state, dispatch] = useReducer(reducer, initialState);
useCallback - 用于返回一个 memoized 版本的回调函数，防止不必要的渲染。
const memoizedCallback = useCallback(
() => {
// 回调函数体
},
[dependencies] // 依赖数组
);
useMemo - 用于对计算结果进行记忆，避免在每次渲染时重复计算。
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
useRef - 用于创建对 DOM 元素或值的引用，可以在渲染之间保持状态。
const refContainer = useRef(initialValue);
useImperativeHandle - 用于使用 ref 时暴露 DOM 元素的方法。
useImperativeHandle(ref, () => ({
// 暴露的方法
}));
useLayoutEffect - 与 useEffect 类似，但它在所有的 DOM 变更之后同步执行。这在需要读取 DOM 布局并同步触发重渲染时非常有用。
useLayoutEffect(() => {
// 副作用操作
}, [dependencies]);
useDebugValue - 用于在 React 开发者工具中显示自定义 hook 的标签。
useDebugValue(value);
useEffect, useCallback, useMemo 等 Hooks 可以更精确地控制副作用和性能消耗。以下是一个使用多个 React Hooks 的示例：
以上代码，我们使用了 useState 来管理 count 的状态，useEffect 来更新页面标题，以及一个简单的按钮来增加 count。
使用 Hooks，你可以编写更简洁、更可重用的组件代码。
Hooks 也使得组件逻辑的测试变得更简单，因为你可以单独测试每个 hook 的逻辑，而不需要包装在一个组件中。
此外，Hooks 还支持自定义，你可以编写自己的 Hooks 来封装复杂的逻辑，然后在多个组件中重用。