API 参考

内置 React Hooks

Hooks 允许你在组件中使用不同的 React 功能。你可以使用内置的 Hooks，也可以将它们组合起来构建你自己的 Hooks。此页面列出了 React 中所有内置的 Hooks。

状态 Hooks

状态 允许组件“记住”信息，例如用户输入。 例如，表单组件可以使用状态来存储输入值，而图片库组件可以使用状态来存储选定的图片索引。

要向组件添加状态，请使用以下其中一个 Hooks

function ImageGallery() {
  const [index, setIndex] = useState(0);
  // ...

上下文 Hooks

上下文 允许组件从远处的父组件接收信息，无需将其作为 props 传递。 例如，你的应用程序的顶级组件可以将当前 UI 主题传递给下面的所有组件，无论深度如何。

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 代码。

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 允许组件订阅外部存储。

你自己的Hooks

你也可以定义你自己的自定义Hooks作为JavaScript函数。

上一页概述
下一页useActionState