react 获取dom节点

前言

在 React 中，通常是通过数据驱动的方式来更新 UI，而不是直接操作 DOM 节点。然而，在某些情况下，我们仍然需要直接操作 DOM 节点，例如处理表单验证、动画等。接下来，我们将介绍 React 中几种常用的获取 DOM 节点的方法。

ref

        ref 是 React 提供的一种方式，可以通过在组件上设置 ref 属性来获取对应的 DOM 节点对象。可以使用 createRef 函数来创建一个 ref 对象，然后将它赋值给需要引用的元素。例如：

import React, { createRef } from 'react';

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

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

通过 createRef 函数创建一个 ref 对象，然后将它赋值给需要引用的 div 元素。在组件被加载后，在 componentDidMount 函数中可以通过 this.myRef.current 来获取 DOM 节点对象。

callback ref

        除了使用 createRef 函数，我们也可以使用 callback ref。callback ref 是一种回调函数，可以在组件加载时调用，并传递一个参数表示对应的 DOM 节点对象。例如：

import React from 'react';

class MyComponent extends React.Component {
  componentDidMount() {
    console.log(this.myRef);
  }

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

在组件加载时，setRef 函数会被调用，并将对应的 DOM 节点作为参数传递，可以将其保存在组件实例中，以供其他函数使用。

findDOMNode

        findDOMNode 是 React 提供的另一种获取 DOM 节点的方法。可以通过 ReactDOM.findDOMNode(component) 来获取组件对应的 DOM 节点对象。例如：

import React from 'react';
import ReactDOM from 'react-dom';

class MyComponent extends React.Component {
  componentDidUpdate() {
    const node = ReactDOM.findDOMNode(this);
    console.log(node);
  }

  render() {
    return (
      <div>Hello, World!</div>
    );
  }
}

在组件更新时，调用 `ReactDOM.findDOMNode(this)` 即可获取组件对应的 DOM 节点对象。

总结

        在 React 中，虽然通常是通过数据驱动来更新 UI，但是有些场景我们仍然需要直接操作 DOM 节点。本篇博客介绍了 React 中获取 DOM 节点的几种方法，包括 ref、callback ref 和 findDOMNode。由于直接操作 DOM 节点可能会破坏 React 的 Virtual DOM，因此我们应该谨慎使用这些方法。