React Ref：你的终极指南

前端

2023-12-14 21:43:25

React Ref 详解：深入浅出，一网打尽

前言

在 React 生态系统中，ref 扮演着至关重要的角色，它允许我们访问 DOM 元素或类实例。本文将深入探讨 React 中 ref 的方方面面，从基本用法到高级技巧，帮助你充分理解和掌握这一强大的特性。

何为 Ref

ref 是 React 中的特殊属性，它为组件提供了指向 DOM 元素或类实例的引用。当 ref 绑定到组件上时，React 将在组件挂载后将 DOM 元素或类实例传递给 ref 属性指定的回调函数。

基本用法

ref 的最基本用法如下：

const MyComponent = React.forwardRef((props, ref) => {
  return <div ref={ref}>Hello world!</div>;
});

在该示例中，ref 属性传递给 MyComponent，当组件挂载后，ref 的回调函数将接收对 DOM 元素 div 的引用。

不同类型的 Ref

React 提供了几种不同类型的 ref，每种都有其特定的用例：

字符串 Ref ：这是最简单也是最不推荐使用的 ref 类型，它仅适用于 DOM 元素。

函数 Ref ：函数 ref 是最常见的 ref 类型，它接受一个回调函数，该回调函数将接收对 DOM 元素或类实例的引用。

创建 Ref ：创建 ref 是一个 React Hooks，它允许你创建并管理 ref，而不必使用回调函数。

转发 Ref ：转发 ref 允许你将父组件的 ref 传递给子组件，从而使父组件能够访问子组件的 DOM 元素或类实例。

高级用法

除了基本用法外，ref 还有许多高级用法，可以极大地增强组件的灵活性。

useImperativeHandle ：useImperativeHandle Hook 允许你为组件定义一个公共 API，供父组件使用。它可以通过提供一个 ref 参数来访问组件的 DOM 元素或类实例。

useLayoutEffect ：useLayoutEffect Hook 在 DOM 更新后运行，这使得它成为获取组件实际 DOM 尺寸或位置的理想选择。

使用 ref 进行表单验证 ：ref 可以用来验证表单数据，通过访问表单元素的 DOM 元素，你可以获取用户输入并进行必要的验证。

实例：在 Ant Design 3 中使用 ref

Ant Design 3 中，表单验证是一个常见的场景。通过使用 ref，我们可以访问表单元素的 DOM 元素，并使用 useImperativeHandle 为表单提供一个公共 API。

import { Form, Button, Input } from "antd";
import { useImperativeHandle, useRef } from "react";

const MyForm = React.forwardRef((props, ref) => {
  const formRef = useRef();

  useImperativeHandle(ref, () => ({
    validate: () => formRef.current?.validateFields(),
  }));

  return (
    <Form ref={formRef}>
      <Input name="username" placeholder="Username" />
      <Button type="primary" htmlType="submit">
        Submit
      </Button>
    </Form>
  );
});