Hooks 允许你在组件中使用不同的 React 功能。你可以使用内置的 Hooks，也可以将它们组合起来构建你自己的 Hooks。此页面列出了 React 中所有内置的 Hooks。
状态 Hooks
状态 允许组件“记住”信息，例如用户输入。 例如，表单组件可以使用状态来存储输入值，而图片库组件可以使用状态来存储选定的图片索引。
要向组件添加状态，请使用以下其中一个 Hooks
useState声明一个可以直接更新的状态变量。
useReducer声明一个状态变量，其更新逻辑位于reducer 函数内部。
function ImageGallery() { const [index, setIndex] = useState(0); // ...
上下文 Hooks
上下文 允许组件从远处的父组件接收信息，无需将其作为 props 传递。 例如，你的应用程序的顶级组件可以将当前 UI 主题传递给下面的所有组件，无论深度如何。
useContext读取并订阅上下文。
function Button() { const theme = useContext(ThemeContext); // ...
引用 Hooks
引用 允许组件保存一些不用于渲染的信息，例如 DOM 节点或超时 ID。与状态不同，更新引用不会重新渲染你的组件。引用是 React 范例的“逃生舱”。当需要使用非 React 系统（例如内置浏览器 API）时，它们非常有用。
useRef声明一个引用。 你可以在其中保存任何值，但最常用于保存 DOM 节点。
useImperativeHandle允许你自定义组件公开的引用。这很少使用。
function Form() { const inputRef = useRef(null); // ...
Effect Hooks
Effects 允许组件连接并与外部系统同步。 这包括处理网络、浏览器 DOM、动画、使用不同 UI 库编写的部件以及其他非 React 代码。
useEffect将组件连接到外部系统。
function ChatRoom({ roomId }) { useEffect(() => { const connection = createConnection(roomId); connection.connect(); return () => connection.disconnect(); }, [roomId]); // ...
Effects 是 React 范例的“逃生舱”。不要使用 Effects 来协调应用程序的数据流。如果你没有与外部系统交互，你可能不需要 Effect。
存在两种很少使用的useEffect变体，它们在时机上有所不同。
useLayoutEffect 在浏览器重绘屏幕之前触发。 你可以在此处测量布局。
useInsertionEffect 在React更改DOM之前触发。 库可以在这里插入动态CSS。
性能 Hooks
优化重新渲染性能的一种常见方法是跳过不必要的操作。例如，你可以告诉React重用缓存的计算结果，或者如果数据自上次渲染以来没有更改，则跳过重新渲染。
要跳过计算和不必要的重新渲染，请使用以下其中一个Hook：
useMemo 允许你缓存昂贵计算的结果。
useCallback 允许你在将函数传递给优化后的组件之前缓存函数定义。
function TodoList({ todos, tab, theme }) { const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]); // ...}
有时，你无法跳过重新渲染，因为屏幕实际上需要更新。在这种情况下，你可以通过将必须同步的阻塞更新（例如，键入输入）与不需要阻塞用户界面的非阻塞更新（例如，更新图表）分开来提高性能。
要优先处理渲染，请使用以下其中一个Hook：
useTransition 允许你将状态转换标记为非阻塞，并允许其他更新中断它。
useDeferredValue 允许你延迟更新UI的非关键部分，并让其他部分先更新。
其他Hooks
这些Hooks主要对库作者有用，在应用程序代码中并不常用。
useDebugValue 允许你自定义React DevTools为自定义Hook显示的标签。
useId 允许组件与其自身关联一个唯一ID。通常与辅助功能API一起使用。
useSyncExternalStore 允许组件订阅外部存储。
useActionState 允许你管理操作的状态。
你自己的Hooks
你也可以定义你自己的自定义Hooks作为JavaScript函数。