1. useState Hook
useState Hook 是 React 提供的最基本的 Hook 之一。它用于声明一个状态变量，并返回一个包含当前状态和更新状态的函数的数组。下面是一个简单的例子，使用 useState Hook 来管理计数器的状态：
importReact, { useState } from'react'; functionCounter() { const [count, setCount] =useState(0); return ( <div><p>You clicked {count} times</p><buttononClick={() =>setCount(count+1)}>Click me</button></div> ); }
在上面的例子中，我们通过 useState Hook 来声明了一个状态变量 count，并将其初始化为 0。setCount 函数用于更新 count 的值，并且每次点击按钮后都会触发组件重新渲染。
2. useEffect Hook
useEffect Hook 用于在组件渲染完成之后执行副作用操作。副作用操作包括但不限于数据请求、状态更新、事件监听等等。下面是一个例子，使用 useEffect Hook 来发送网络请求：
importReact, { useState, useEffect } from'react'; functionUserList() { const [users, setUsers] =useState([]); useEffect(() => { fetch('/api/users') .then(response=>response.json()) .then(data=>setUsers(data)); }, []); return ( <ul> {users.map(user=> ( <likey={user.id}>{user.name}</li> ))} </ul> ); }
在上面的例子中，我们使用 useEffect Hook 来发送网络请求，并将请求结果存储在状态变量 users 中。在 useEffect Hook 的第二个参数中传入了一个空数组，表示这个副作用操作只需要在组件首次渲染时执行一次。
3. useContext Hook
useContext Hook 用于在组件之间共享状态。它接收一个 Context 对象并返回当前上下文的值。下面是一个例子，使用 useContext Hook 来共享主题颜色：
importReact, { useContext } from'react'; constThemeContext=React.createContext('light'); functionThemeButton() { consttheme=useContext(ThemeContext); return ( <buttonstyle={{ backgroundColor: theme }}>Click me</button> ); }
在上面的例子中，我们使用 createContext 函数创建了一个主题颜色的 Context 对象，并将其初始化为 'light'。在 ThemeButton 组件中，我们使用 useContext Hook 来获取当前主题颜色，并将其作为按钮的背景色。
结语
React Hooks 是一个强大的工具，它能够让我们更加方便地管理组件的状态管理
