ReactJS 中 refs 的意义是什么？

在本文中，我们将了解 React 中 refs 的意义。 Refs 是 React 提供的一个函数，用于访问 DOM 元素和您可能自己创建的 React 元素。它们用于我们想要更改子组件的值的情况下，而不使用道具和所有东西。它们还为我们提供了很好的功能，因为我们可以对它们使用回调。

我们可以通过以下三种方法创建一个 Ref：

使用 React.createRef()
使用 useRef() 钩子
使用回调参考

方法一：使用 React.createRef()

使用创建一个 ref 变量 React.createRef()。它是在 React 16.3.I 版本中引入的。
使用元素的 ref 属性将 ref 变量附加到 React 元素。

句法：

const func = React.createRef();

方法 2：使用 useRef() 钩子

我们不能在功能组件中使用 ref 属性，因为它们没有实例。要在功能组件中使用 ref 功能，我们可以使用 useRef 挂钩。

使用 React.useRef() 创建一个 ref 变量
使用元素的 ref 属性将 ref 变量附加到 React 元素。
使用 useRef() 而不是 createRef() 的好处是，它可以方便地保留任何可变值，类似于在类中使用实例字段的方式。
useRef() 也采用初始值。

句法：

const func = useRef(null);

方法 3：使用回调 ref

该方法在 React 16.3 版本之前使用。因此，如果您使用 React<16.3，您将使用此方法。在这个方法中，我们传递一个函数而不是传递一个由 createRef() 或 useRef() 创建的 ref 属性。该函数接收 React 元素或 HTML DOM 元素作为参数，可以使用。

句法：

let textInput = null;
 // Callback function that will set ref for input field
 const setTextInputRef = (element) => {
     textInputRef = element;
 };

示例：在此示例中，我们通过 createRef 方法使用 ref 来聚焦输入元素。

Javascript

import * as React from 'react';
  
const App = () => {
  
  // Creating textInputRef variable
  const textInputRef = React.createRef();
  
  // This method will be used to focus textInput 
  // and give background color to textInput field
  const textInputFocusHandler = () => {
  
    // Focusing input element
    textInputRef.current.focus();
  
    // Giving background color to input element
    textInputRef.current.style.background = 'green';
  };
  
  return (
    
      {/* Attaching ref variable using element's ref attribute */}
      
      {/* Attaching textInputFocusHandler method to button click */}
      
    
  );
};
  
export default App;

输出：

参考意义：

实现交互：我们主要通过 React 中的道具和状态来实现交互。但有时有些交互是 props 和 states 无法实现的。那时 ref 有助于实现它们。
第三方 DOM 库的集成：当我们想要将我们的 React 应用程序与第三方 Dom 库集成时，React refs 可以帮助我们这样做。
访问 DOM：在 React 中，组件不能直接使用 DOM。但是有了 Ref 我们就可以做到。我们可以直接访问任何元素，也可以对其进行操作。有些情况是焦点，文本选择等。
触发动画： React refs 帮助我们在 DOM 中触发命令式动画。
提供良好的功能：我们可以将回调函数与 React ref 一起使用。

注意：我们应该只在真正需要的时候使用 Refs。应该避免做可以以声明方式完成的事情。