一文读懂React中获取原生DOM的方式1.获取原生DOM元素的三种方式 1.1 字符串ref 这是 React 早期的

1.获取原生DOM元素的三种方式

1.1 字符串ref

这是 React 早期的一种方式，在新版本的 React 中已经被废弃，不再推荐使用。可以通过在元素上添加 ref 属性来创建一个引用。

<div ref="myElement">示例</div>

获取方式：通过 this.refs.myElement 来获取。
注意事项：这种方式在 React 16.3 之后已被废弃，不建议使用。

1.2 使用createRef()[推荐🌟]

createRef 是 React 提供的用于创建 Refs（引用）的方法。Refs 是 React 中访问组件底层 DOM 元素或者类组件实例的方式。createRef 通常在类组件中使用，它返回一个用于引用 DOM 元素或组件实例的对象。

创建 Ref 对象：

在你的类组件的构造函数中，通过 React.createRef() 创建一个 Ref 对象：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  // ...
}

将 Ref 与元素关联：

在 JSX 中，将创建的 Ref 对象与你想要引用的元素关联，通常使用 ref 属性：

render() {
  return <div ref={this.myRef}>这是一个 DOM 元素</div>;
}

这样，this.myRef 就引用了这个 DOM 元素

访问引用的元素或组件实例：

可以通过 this.myRef.current 来访问引用的元素或组件实例。例如，访问 DOM 元素的 innerText 属性：

const text = this.myRef.current.innerText;

需要注意

Refs 是可变的。可以通过 this.myRef.current 来读取和修改引用的元素。
Refs 的更新是同步的，但是 React 组件的渲染是异步的。这意味着在调用 this.myRef.current 之前，确保元素已经被渲染。

使用 createRef 的主要优势是它提供了一个现代、类型安全的方式来引用元素和组件实例，而不再需要使用字符串 ref。这使得代码更容易维护和理解，尤其是在 TypeScript 项目中。

createRef 是 React 中用于创建 Refs 的推荐方式，它在类组件中特别有用，可以帮助你访问和操作 DOM 元素或组件实例。

1.3 使用回调函数

使用回调函数的方式可以在类组件和函数组件中都使用，它允许你在元素被渲染后执行一个函数，将元素引用传递给该函数。

constructor(props) {
  super(props);
  this.myElement = null;
}

render() {
  return <div ref={(el) => (this.myElement = el)}>示例</div>;
}

获取方式：直接使用 this.myElement。
注意事项：这是一种灵活的方式，适用于不同类型的组件，可以用于处理多个元素的引用。

2.案例

下列代码主要演示了三种获取原生 DOM 元素的方式，然后在点击按钮时打印这些 DOM 元素的引用。

在构造函数中，你创建了两个 Ref 对象，this.refTwo 和 this.refThree。this.refTwo 使用了 createRef() 函数来创建，而 this.refThree 被初始化为 null。

render 方法：这是 React 组件的渲染方法，用于返回 JSX 元素。在 render 方法中，你创建了三个 h2标签，每个标签都有不同的 ref 属性。

获取DOM方式一：第一种方式是使用字符串来设置 ref 属性。这种方式在 React 16.3 之后被废弃，但仍然能够工作。你将在 getNativeDOM 方法中使用 this.refs.weihy 来获取 DOM 引用。
获取DOM方式二：第二种方式是使用 createRef() 创建的 this.refTwo 对象作为 ref 属性的值。你将在 getNativeDOM 方法中使用 this.refTwo.current 来获取 DOM 引用。
获取DOM方式三：第三种方式是通过一个回调函数传递给 ref 属性。这个回调函数会在元素被渲染后被调用，将元素作为参数传递给 this.refThree。

getNativeDOM 方法：这个方法被按钮的点击事件触发。在方法内部，你展示了三种不同的方式来获取 DOM 元素的引用：

console.log("第一种方式：", this.refs.weihy);：使用字符串 ref 的方式，通过 this.refs.weihy 获取 DOM 引用。
console.log("第二种方式：", this.refTwo.current);：使用 createRef() 创建的方式，通过 this.refTwo.current 获取 DOM 引用。
console.log("第三种方式：", this.refThree);：使用回调函数传递的方式，直接访问 this.refThree 获取 DOM 引用。

import React, { PureComponent, createRef } from "react";

export class App extends PureComponent {
  constructor() {
    super();
    // 创建ref对象
    this.refTwo = createRef();

    this.refThree = null;
  }
  render() {
    return (
      <div>
        <h2 ref="weihy">获取DOM方式一</h2>

        <h2 ref={this.refTwo}>获取DOM方式二</h2>
        <h2 ref={(el) => (this.refThree = el)}>获取DOM方式三</h2>
        <button onClick={(e) => this.getNativeDOM()}>获取DOM</button>
      </div>
    );
  }

  getNativeDOM() {
    // 获取原生DOM
    // 1.方式一：在react元素上绑定一个ref字符串
    console.log("第一种方式：", this.refs.weihy);
    // 2.方式二：提前创建ref对象，createRef(),将创建出来的对象绑定到元素
    console.log("第二种方式：", this.refTwo.current);

    // 3.方式三：传入一个回调函数，在对应元素渲染后将元素传入
    console.log("第三种方式：", this.refThree);
  }
}

export default App;

代码运行结果如下，在点击按钮时分别通过三种不同的方式来获取DOM元素。