React怎么使用refs操作DOM

在React中，refs是一种用于直接访问DOM元素或React组件实例的机制。虽然React推崇声明式编程，但在某些情况下，直接操作DOM是不可避免的。refs提供了一种在React组件中访问底层DOM元素的方式，使得开发者可以在需要时直接操作DOM。

1. 什么是Refs？

refs是React提供的一种机制，允许我们直接访问DOM元素或React组件实例。通常情况下，React通过虚拟DOM来管理组件的渲染和更新，但在某些场景下，我们需要直接操作DOM元素，比如：

• 管理焦点、文本选择或媒体播放。
• 触发强制动画。
• 集成第三方DOM库。

在这些情况下，refs就显得非常有用。

2. 创建Refs

在React中，创建refs的方式有多种，最常见的方式是使用React.createRef()。

2.1 使用React.createRef()

React.createRef()是React 16.3引入的API，用于创建一个ref对象。这个ref对象可以附加到React元素或组件上，从而允许我们访问对应的DOM节点或组件实例。

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

  componentDidMount() {
    // 访问DOM元素
    this.myRef.current.focus();
  }

  render() {
    return <input type="text" ref={this.myRef} />;
  }
}

在上面的例子中，this.myRef是一个ref对象，它被附加到一个<input>元素上。在componentDidMount生命周期方法中，我们可以通过this.myRef.current访问到对应的DOM元素，并调用focus()方法使其获得焦点。

2.2 使用回调Refs

在React 16.3之前，refs是通过回调函数的方式创建的。虽然React.createRef()是推荐的方式，但回调refs仍然可以使用。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = null;
    this.setMyRef = element => {
      this.myRef = element;
    };
  }

  componentDidMount() {
    // 访问DOM元素
    if (this.myRef) {
      this.myRef.focus();
    }
  }

  render() {
    return <input type="text" ref={this.setMyRef} />;
  }
}

在这个例子中，ref属性被赋予了一个回调函数this.setMyRef。当组件挂载时，React会调用这个回调函数，并将对应的DOM元素作为参数传递给它。我们可以将这个DOM元素保存在this.myRef中，并在需要时使用它。

3. 使用Refs访问DOM元素

一旦我们创建了一个ref并将其附加到一个DOM元素上，我们就可以通过ref.current来访问这个DOM元素。

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

  componentDidMount() {
    // 自动聚焦到输入框
    this.inputRef.current.focus();
  }

  render() {
    return <input type="text" ref={this.inputRef} />;
  }
}

在这个例子中，AutoFocusInput组件在挂载后会自动将焦点设置到输入框上。我们通过this.inputRef.current访问到<input>元素，并调用focus()方法。

4. 使用Refs访问组件实例

除了访问DOM元素，refs还可以用于访问类组件的实例。这对于调用组件的方法或访问组件的状态非常有用。

class CustomInput extends React.Component {
  focus() {
    this.inputRef.current.focus();
  }

  render() {
    return <input type="text" ref={this.inputRef} />;
  }
}

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

  handleClick = () => {
    // 调用子组件的方法
    this.customInputRef.current.focus();
  };

  render() {
    return (
      <div>
        <CustomInput ref={this.customInputRef} />
        <button onClick={this.handleClick}>Focus Input</button>
      </div>
    );
  }
}

在这个例子中，ParentComponent通过ref访问CustomInput组件的实例，并调用其focus()方法。这使得父组件可以控制子组件的行为。

5. 使用Refs的注意事项

虽然refs非常强大，但在使用时需要注意以下几点：

• 避免过度使用Refs：React推崇声明式编程，过度使用refs可能会导致代码难以维护。在大多数情况下，应该优先考虑使用状态和属性来管理组件的行为。

• 不要在函数组件上使用Refs：refs只能用于类组件或DOM元素。如果需要在函数组件中使用refs，可以使用React.forwardRef或useRef钩子。

• Refs不会自动更新：当组件重新渲染时，refs不会自动更新。如果需要在组件更新时重新设置refs，可以使用回调refs或在componentDidUpdate生命周期方法中手动更新refs。

6. 使用useRef钩子

在函数组件中，可以使用useRef钩子来创建refs。useRef返回一个可变的ref对象，其.current属性被初始化为传入的参数。

function MyComponent() {
  const inputRef = React.useRef(null);

  React.useEffect(() => {
    // 访问DOM元素
    inputRef.current.focus();
  }, []);

  return <input type="text" ref={inputRef} />;
}

在这个例子中，useRef创建了一个ref对象inputRef，并将其附加到<input>元素上。在useEffect钩子中，我们可以通过inputRef.current访问到DOM元素，并调用focus()方法。

7. 总结

refs是React中用于直接访问DOM元素或组件实例的机制。虽然React推崇声明式编程，但在某些情况下，直接操作DOM是必要的。通过React.createRef()、回调refs或useRef钩子，我们可以在React组件中创建和使用refs。然而，使用refs时应谨慎，避免过度依赖直接操作DOM，以保持代码的可维护性和可读性。