什么是React的Refs，如何使用它们？

最新推荐文章于 2025-04-02 23:00:04 发布

JJCTO袁龙

最新推荐文章于 2025-04-02 23:00:04 发布

阅读量420

点赞数 5

分类专栏： react 文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/yuanlong12178/article/details/145624848

版权

react 专栏收录该内容

130 篇文章

订阅专栏

什么是React的Refs，如何使用它们？

在现代前端开发中，React库以其组件化和高效更新的特性而受到广泛欢迎。作为一名开发者，了解React的基本原则和功能至关重要。其中，Refs（引用）是一个相对较少讨论但却极为强大的功能。本文将介绍React的Refs是什么、它们的用途，以及如何在您的应用程序中有效使用它们。

什么是Refs？

在React中，Refs提供了一种方法，可以直接访问DOM节点或React组件实例。这与使用状态（state）进行数据驱动的编程有所不同。状态适合用于管理数据的变化并相应更新UI，而Refs则用于直接操作DOM元素或获取组件的实例信息。

Refs通常用于以下几种情况：

直接访问DOM元素：当您需要获取某个DOM元素的高度、宽度、值等直接信息时。
避免不必要的重新渲染：在某些情况下，通过Refs操作DOM可以避免默认的生命周期更新。
实现动画或集成第三方库：当您需要与一些需要直接DOM操作的库集成时，使用Refs非常方便。

如何创建和使用Refs？

在React中，有两种创建Refs的方法：使用React.createRef()或通过回调函数。接下来，我们将分别介绍这两种方法。

方法一：使用`React.createRef()`

这是推荐的创建Refs的方法，适用于类组件和函数组件。下面是一个简单的示例，展示如何通过React.createRef()来获取DOM元素的值。

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    // 创建一个ref
    this.inputRef = React.createRef();
  }

  handleClick = () => {
    // 访问DOM节点
    alert(`Input Value: ${this.inputRef.current.value}`);
  };

  render() {
    return (
      <div>
        <input type="text" ref={this.inputRef} />
        <button onClick={this.handleClick}>Get Input Value</button>
      </div>
    );
  }
}

export default MyComponent;

在这个示例中，我们创建了一个inputRef的引用，并将其附加到一个文本输入框上。点击“Get Input Value”按钮后，您将看到一个弹出窗口显示输入框中的值。这是Refs的基本用法，通过.current属性来访问DOM节点。

方法二：使用回调函数

另一种创建Refs的方法是使用回调函数。这种方式允许您更灵活地管理Refs。下面是一个使用回调函数的示例：

import React, { Component } from 'react';

class MyComponent extends Component {
  inputRef = null;

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

  handleClick = () => {
    alert(`Input Value: ${this.inputRef.value}`);
  };

  render() {
    return (
      <div>
        <input type="text" ref={this.setInputRef} />
        <button onClick={this.handleClick}>Get Input Value</button>
      </div>
    );
  }
}

export default MyComponent;

在这个示例中，我们使用setInputRef回调函数来将输入框的DOM节点赋值给inputRef。通过这种方式，我们仍然能够获取输入框的值。

在函数组件中使用Refs

在React 16.8版本引入Hooks后，您也可以在函数组件中使用useRef钩子来创建Refs。

import React, { useRef } from 'react';

const MyFunctionComponent = () => {
  const inputRef = useRef(null);

  const handleClick = () => {
    alert(`Input Value: ${inputRef.current.value}`);
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Get Input Value</button>
    </div>
  );
};

export default MyFunctionComponent;

在这个函数组件中，我们使用useRef创建一个引用，并依然可以通过inputRef.current访问输入框的值。与类组件相比，这种写法更加简洁明了，且使用Hooks能够让代码更加清晰。