React中ref的三种形式使用小结

引言

在 React 中，ref 是一个重要的功能，用于直接访问 DOM 元素或组件实例。通常，我们使用 ref 来实现一些需要直接操作 DOM 的场景，例如焦点管理、文本选择或动画等。

在 React 中，ref 主要有三种形式：字符串形式、回调形式和 createRef。

一、字符串形式的 ref(不推荐使用)

ref 可以使用字符串形式来引用 DOM 元素或组件实例，如下所示：

class MyComponent extends React.Component {
  render() {
    return <div ref="myDiv">Hello</div>;
  }

  componentDidMount() {
    console.log(this.refs.myDiv);  // 通过 refs 获取 DOM 元素
  }
}

在组件挂载后，React 会在 refs 对象中自动为每个字符串形式的 ref 创建一个属性，指向对应的 DOM 元素或组件实例。

使用场景

• 字符串形式的 ref 在早期版本中常用于引用 DOM 元素，尤其是对于较简单的组件而言。
• 然而，其缺乏灵活性，且容易导致潜在的性能问题和调试困难。因此，开发者应避免使用字符串形式的 ref。

二、回调形式的 ref

类方法中的回调 ref

在 React 中，回调形式的 ref 是通过将一个函数传递给 ref 属性来动态设置引用的方式。这个函数会在组件挂载时被调用，并将对应的 DOM 元素或组件实例作为参数传递给它。这个方式通常用于需要在组件生命周期的特定时刻访问 DOM 或组件实例的情况。

class MyComponent extends React.Component {
  setRef = (element) => {
    this.myDiv = element;  // 获取 DOM 元素
  };

  render() {
    return <div ref={this.setRef}>Hello</div>;
  }

  componentDidMount() {
    console.log(this.myDiv);  // 通过 this.myDiv 获取 DOM 元素
  }
}

在这个例子中，ref={this.setRef} 将 setRef 方法作为回调函数传递。当组件挂载时，React 会调用 setRef 函数，并将 DOM 元素作为参数传入。这样，this.myDiv 就能引用到挂载的 DOM 元素。

内联回调函数

除了使用类方法来定义回调函数，你还可以将回调函数直接写成内联函数，进一步简化代码。这种写法特别适用于一些简单的场景，避免了额外定义方法。

class MyComponent extends React.Component {
  render() {
    return <div ref={(element) => { this.myDiv = element; }}>Hello</div>;
  }

  componentDidMount() {
    console.log(this.myDiv);  // 通过 this.myDiv 获取 DOM 元素
  }
}

在这个例子中，ref={(element) => { this.myDiv = element; }} 就是一个内联的回调函数。每当 DOM 元素挂载时，React 会调用该回调，并将 DOM 元素作为参数传入。内联函数写法使得代码更加简洁，适合不需要在其他地方使用 ref 的情况。

使用场景

动态引用 DOM 元素：如果你需要动态访问不同的 DOM 元素（例如多个同类型的元素），回调形式的 ref 非常有用。每当元素挂载或卸载时，回调函数会被自动调用，从而让你能够及时访问或清理引用。
条件渲染：在某些条件下渲染不同的 DOM 元素，并需要访问它们时，回调形式的 ref 可以确保你在元素实际挂载后才获得对它的引用。

三、createRef（推荐）

createRef 是 React 16.3 引入的一个新 API，是现代 React 中推荐使用的 ref 创建方式。与回调函数形式不同，createRef 提供了一种更加可靠和清晰的方式来引用 DOM 元素或组件实例，并且与每个组件实例绑定，确保 ref 在组件的生命周期内保持一致。

为什么推荐使用 createRef？

createRef 创建的 ref 是专人专用的，每个组件实例都会拥有一个独立的 ref 对象。在组件的生命周期内，ref 的 current 属性会保持对相应 DOM 元素的引用，且不会因为重新渲染而发生变化，这使得它比回调形式的 ref 更加稳定和高效。

在类组件中的使用

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myDivRef = React.createRef();  // 使用 createRef 创建 ref
  }

  componentDidMount() {
    console.log(this.myDivRef.current);  // 通过 current 获取 DOM 元素
  }

  render() {
    return <div ref={this.myDivRef}>Hello</div>;
  }
}

在这段代码中，我们通过 React.createRef() 创建了一个 ref，并将其赋值给 this.myDivRef。每个组件实例都会拥有一个独立的 myDivRef。当组件挂载时，this.myDivRef.current 会指向 DOM 元素，且在组件的生命周期内不会变化，保证了 ref 的一致性。

在函数组件中的使用

对于函数组件，createRef 并不常用。函数组件通常使用 useRef 来代替 createRef。useRef 会返回一个带有 current 属性的对象，类似于 createRef，但它在函数组件中更为常见，并且会在组件的整个生命周期内保持不变。

import React, { useRef, useEffect } from 'react';

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

  useEffect(() => {
    console.log(myDivRef.current);  // 通过 current 获取 DOM 元素
  }, []);  // 仅在挂载时调用

  return <div ref={myDivRef}>Hello</div>;
}

在这个例子中，useRef 创建了一个 ref，并将其传递给 div 元素。myDivRef.current 会指向该 DOM 元素。与 createRef 相似，useRef 的 current 属性在组件的整个生命周期内保持不变，适合需要持续引用 DOM 元素的场景。

createRef 和 useRef 的主要区别

• 类组件中使用 createRef：createRef 在类组件中使用时，每个组件实例都会有一个独立的 ref 对象，它是专人专用的，且在组件生命周期内保持一致，不会因重新渲染而变化。
• 函数组件中使用 useRef：在函数组件中，useRef 是代替 createRef 的常用方式，提供了与 createRef 类似的功能，且它的引用对象在整个生命周期内保持稳定，避免了回调形式 ref 的频繁创建。

使用场景

类组件中的引用：对于类组件，createRef 是管理 ref 的推荐方式，它保证了每个组件实例拥有独立的、稳定的引用。
函数组件中的引用：在函数组件中，useRef 是创建 ref 的标准方式，它提供了与 createRef 类似的功能，适合需要持久引用的场景。

结语

到此这篇关于React中ref的三种形式的文章就介绍到这了,更多相关React ref内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论