从初学者到高手的 React ref 指南：透彻理解

前端

2024-02-23 11:36:31

在 React 开发中，我们经常需要与 DOM 元素或组件实例进行交互。例如，你可能需要获取一个输入框的值，或者手动触发一个按钮的点击事件。这时，就需要用到 React 的 ref 功能了。

什么是 React ref？

简单来说，React ref 就像是一个指针，它指向一个 DOM 元素或 React 组件实例。通过 ref，我们可以直接访问和操作这些元素或实例，突破 React 的数据驱动模式，进行一些必要的底层操作。

为什么需要 React ref？

虽然 React 推崇数据驱动的方式来更新 UI，但在某些情况下，直接操作 DOM 或组件实例是不可避免的。例如：

管理焦点、文本选择或媒体播放。 比如，你可能需要在页面加载后自动将焦点设置到某个输入框，或者控制视频的播放和暂停。
触发强制动画。 某些动画效果需要直接操作 DOM 元素的样式或属性，ref 可以帮助我们实现这一点。
集成第三方 DOM 库。 一些第三方库需要直接访问 DOM 元素，例如图表库或地图库。

如何使用 React ref？

React 提供了两种创建 ref 的方式：

1. 使用 useRef 钩子 (推荐)

useRef 钩子是 React 16.8 引入的，它是创建 ref 的推荐方式，尤其是在函数组件中。

import React, { useRef } from 'react';

function MyComponent() {
  const inputRef = useRef(null);

  const handleClick = () => {
    // 获取输入框的值
    const inputValue = inputRef.current.value;
    console.log(inputValue);

    // 清空输入框
    inputRef.current.value = '';

    // 将焦点设置到输入框
    inputRef.current.focus();
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>获取值并清空</button>
    </div>
  );
}

在上面的例子中，我们使用 useRef 创建了一个名为 inputRef 的 ref，并将其初始值设置为 null。然后，我们将 inputRef 赋值给 input 元素的 ref 属性，这样 inputRef.current 就指向了这个 input 元素。在 handleClick 函数中，我们可以通过 inputRef.current 访问 input 元素，获取其值、清空内容或设置焦点。

2. 使用回调函数

在类组件中，我们也可以使用回调函数来创建 ref。

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = null;

    this.setInputRef = element => {
      this.inputRef = element;
    };
  }

  handleClick = () => {
    // 获取输入框的值
    const inputValue = this.inputRef.value;
    console.log(inputValue);
  };

  render() {
    return (
      <div>
        <input type="text" ref={this.setInputRef} />
        <button onClick={this.handleClick}>获取值</button>
      </div>
    );
  }
}

在上面的例子中，我们在构造函数中定义了一个 inputRef 变量，并将其初始值设置为 null。然后，我们定义了一个 setInputRef 函数，该函数接收一个 DOM 元素作为参数，并将 inputRef 赋值为该元素。最后，我们将 setInputRef 函数作为 ref 属性的值传递给 input 元素。当 input 元素挂载到 DOM 上时，React 会调用 setInputRef 函数，并将 input 元素作为参数传递进去，这样 this.inputRef 就指向了这个 input 元素。

注意事项

避免过度使用 ref。 ref 应该作为一种补充手段，而不是替代 React 的数据驱动模式。如果可以通过 props 和 state 来管理组件的状态，就尽量避免使用 ref。
不要在函数组件的 render 函数中创建 ref。因为每次 render 函数执行时都会重新创建 ref，这可能会导致一些问题。应该在函数组件的顶层作用域中创建 ref。
不要在 ref 的回调函数中执行副作用操作。 ref 的回调函数应该只用于获取 DOM 元素或组件实例，不应该在其中执行副作用操作，例如修改 DOM 或发送网络请求。

常见问题解答

1. useRef 和 createRef 有什么区别？

useRef 是 React 钩子，主要用于函数组件；createRef 是类组件中创建 ref 的方法。在函数组件中推荐使用 useRef。

2. ref 可以指向哪些元素？

ref 可以指向 DOM 元素或类组件实例，但不能指向函数组件，因为函数组件没有实例。

3. 如何访问子组件的 ref？

可以通过 forwardRef 将父组件的 ref 传递给子组件。

4. ref 和 state 有什么区别？

ref 用于直接访问 DOM 元素或组件实例，而 state 用于存储组件的数据。修改 state 会触发组件重新渲染，而修改 ref 不会。

5. 什么时候应该使用 ref？

当需要直接操作 DOM 元素或组件实例时，例如管理焦点、文本选择、媒体播放、触发强制动画或集成第三方 DOM 库时，可以使用 ref。

希望本文能够帮助你更好地理解和使用 React ref。记住，ref 应该作为一种补充手段，而不是替代 React 的数据驱动模式。只有在必要的时候才使用 ref，才能写出更优雅、更易于维护的 React 代码。