内置 React Hooks
Hooks 允许您在组件中使用不同的 React 功能。您可以使用内置 Hooks 或将它们组合起来构建自己的 Hooks。此页面列出了 React 中所有内置的 Hooks。
状态 Hooks
状态 使组件能够 “记住” 诸如用户输入之类的信息。 例如，表单组件可以使用状态来存储输入值，而图片库组件可以使用状态来存储所选图片的索引。
要向组件添加状态，请使用以下 Hooks 之一
useState声明一个可以直接更新的状态变量。useReducer声明一个状态变量，其更新逻辑位于一个 reducer 函数中。
function ImageGallery() {
const [index, setIndex] = useState(0);
// ...上下文 Hooks
上下文 使组件能够 接收来自远端父组件的信息，而无需将其作为属性传递。 例如，应用程序的顶层组件可以将当前的 UI 主题传递给下面的所有组件，无论它们嵌套多深。
useContext读取并订阅上下文。
function Button() {
const theme = useContext(ThemeContext);
// ...引用 Hooks
引用 使组件能够 保存一些不用于渲染的信息， 例如 DOM 节点或计时器 ID。与状态不同，更新引用不会导致组件重新渲染。引用是 React 范式中的“逃生舱口”。当您需要使用非 React 系统（例如内置浏览器 API）时，它们很有用。
useRef声明一个引用。您可以在其中保存任何值，但最常用于保存 DOM 节点。useImperativeHandle允许您自定义组件公开的引用。这很少使用。
function Form() {
const inputRef = useRef(null);
// ...副作用 Hooks
副作用 使组件能够 连接到外部系统并与之同步。 这包括处理网络、浏览器 DOM、动画、使用其他 UI 库编写的控件以及其他非 React 代码。
useEffect将组件连接到外部系统。
function ChatRoom({ roomId }) {
useEffect(() => {
const connection = createConnection(roomId);
connection.connect();
return () => connection.disconnect();
}, [roomId]);
// ...副作用是 React 范式中的“逃生舱口”。不要使用副作用来协调应用程序的数据流。如果您没有与外部系统交互，您可能不需要副作用。
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允许您管理操作的状态。