React Ref

React Ref 是 React 提供的一种用于访问 DOM 或子组件的方法。在 React 中，我们通常使用虚拟 DOM 来管理组件的状态和渲染。但在某些情况下，我们需要访问浏览器 DOM，比如操作 TextInput 的焦点切换、操纵 canvas 等，这时就需要使用 React Ref。

使用方法

创建 Ref

创建 Ref 有两种方法，一种是使用 React.createRef() 函数来创建 Ref，另一种是使用回调函数。

使用 React.createRef() 函数创建 Ref：

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef}>Hello, React Ref!</div>;
  }
}

使用回调函数创建 Ref：

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = null;
    this.setMyRef = element => {
      this.myRef = element;
    };
  }
  render() {
    return <div ref={this.setMyRef}>Hello, React Ref!</div>;
  }
}

使用 Ref

Ref 的值是一个对象，可以通过 .current 属性来访问它所引用的 DOM 节点或组件实例。

使用 Ref 访问 DOM 节点：

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.myRef.current.focus();
  }
  render() {
    return (
      <div>
        <input type="text" ref={this.myRef} />
        <button onClick={this.handleClick}>Focus</button>
      </div>
    );
  }
}

使用 Ref 访问子组件：

import React from 'react';

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.childRef.current.sayHello();
  }
  render() {
    return (
      <div>
        <ChildComponent ref={this.childRef} />
        <button onClick={this.handleClick}>Say Hello</button>
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  sayHello() {
    console.log('Hello, React Ref!');
  }
  render() {
    return <div>Child Component</div>;
  }
}

注意事项

• Ref 只能在类组件中使用，不能在函数组件中使用。
• 如果 Ref 引用的组件是函数组件，则通过 forwardRef 将 Ref 传递给它。
• 不要过度使用 Ref，因为它会使代码变得杂乱无章。
• Ref 可以用于访问 DOM 节点，但不建议用于直接操作 DOM，因为这会破坏单向数据流的原则。如果需要直接操作 DOM，请使用其他库或框架。
• 如果 Ref 不使用时，必须将其设置为 null，避免内存泄漏。

参考文献

• React 官方文档