React 中使用 Ref 实现 DOM 操作

在 React 中，我们通常通过“状态（state）”和“属性（props）”来控制组件的显示和行为。但是，在某些情况下，我们需要对 DOM 元素进行直接操作，以便实现某些交互效果。这时，就需要使用 React 提供的 Ref 功能了。

什么是 Ref

Ref 是 React 提供的一种引用 DOM 元素的方法，它可以让我们直接操作 DOM 元素，而不必通过组件的状态或属性来控制。Ref 可以用于访问组件中的节点、组件的实例或其他 React 元素。

在 React 中，我们可以通过 React.createRef 方法创建一个 Ref 对象，然后将其绑定到组件的某个元素上。这样，我们就可以通过 Ref 对象来访问这个元素。

如何使用 Ref

下面是一个示例，在其中使用 Ref 实现了一个简单的组件：

// www.javascriptcn.com code example
import React from 'react';

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

  handleClick() {
    this.myRef.current.style.color = 'red';
  }

  render() {
    return (
      <div>
        <h1 ref={this.myRef}>Hello, world!</h1>
        <button onClick={this.handleClick.bind(this)}>Change color</button>
      </div>
    );
  }
}

在这个组件中，我们使用 React.createRef 方法创建了一个 Ref 对象 myRef，并将其绑定到 <h1> 元素上。在 handleClick 方法中，我们可以通过 this.myRef.current 访问到这个元素，然后改变它的颜色。

需要注意的是，Ref 对象中的 current 属性才是真正的 DOM 元素，因此在使用时需要先判断 current 是否存在，以免出现错误。

除了将 Ref 绑定到元素上，我们还可以将其绑定到组件的实例上，以便在组件中直接操作实例。

例如，如果想实现一个定时器，在组件卸载时自动停止，可以这样做：

// www.javascriptcn.com code example
import React from 'react';

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

  componentDidMount() {
    this.timer = setInterval(() => {
      console.log('Hello, world!');
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  render() {
    return (
      <div ref={this.myRef}>
        <h1>Hello, world!</h1>
      </div>
    );
  }
}

在这个组件中，我们将 Ref 绑定到了 <div> 元素上，并在 componentDidMount 生命周期方法中启动了一个定时器，输出“Hello, world!”。在组件卸载时，通过 componentWillUnmount 生命周期方法停止定时器。

总结

在 React 中使用 Ref 实现 DOM 操作可以极大地拓展组件的功能。通过 Ref，我们可以直接操作 DOM 元素、组件实例或其他 React 元素，而不必通过状态或属性来控制。需要注意的是，使用 Ref 时要谨慎，避免出现不必要的副作用。

希望本文对你有所帮助，谢谢！

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/64a6c4e948841e9894368b2a