React 中Ref用法探秘

在React中，Ref的使用场景分为两种：操作DOM元素和访问组件实例。其中，操作DOM元素 更为常见，比如获取DOM元素的属性、方法，或者在DOM元素上添加事件监听器等。

获取DOM元素

函数组件中获取DOM元素：

• 使用useRef hook创建ref对象
• 在DOM元素上添加ref属性，并将其指向useRef hook创建的ref对象
• 在需要使用DOM元素时，直接使用ref对象来访问DOM元素

import { useRef } from 'react';

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

  function focusInput() {
    inputRef.current.focus();
  }

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={focusInput}>Focus input</button>
    </div>
  );
}

添加事件监听器

函数组件中给DOM元素添加事件监听器：

• 使用useRef hook创建ref对象
• 在DOM元素上添加ref属性，并将其指向useRef hook创建的ref对象
• 在组件的useEffect hook中，使用ref对象来添加事件监听器

import { useRef, useEffect } from 'react';

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

  useEffect(() => {
    const input = inputRef.current;
    input.addEventListener('focus', () => {
      console.log('Input focused');
    });

    return () => {
      input.removeEventListener('focus', () => {
        console.log('Input focused');
      });
    };
  }, [inputRef]);

  return <input ref={inputRef} />;
}

类组件中给DOM元素添加事件监听器：

• 在组件的构造函数中创建ref对象
• 在DOM元素上添加ref属性，并将其指向ref对象
• 在组件的方法中，使用ref对象来添加事件监听器

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

  componentDidMount() {
    const input = this.inputRef.current;
    input.addEventListener('focus', () => {
      console.log('Input focused');
    });
  }

  componentWillUnmount() {
    const input = this.inputRef.current;
    input.removeEventListener('focus', () => {
      console.log('Input focused');
    });
  }

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

访问组件实例

函数组件中访问组件实例：

• 使用useRef hook创建ref对象
• 将组件实例自身作为ref对象
• 在需要使用组件实例时，直接使用ref对象来访问组件实例

import { useRef } from 'react';

function MyComponent() {
  const ref = useRef(null);

  useEffect(() => {
    const instance = ref.current;
    console.log(instance);
  }, []);

  return <div ref={ref} />;
}

类组件中访问组件实例：

• 在组件的构造函数中创建ref对象
• 将组件实例自身作为ref对象
• 在需要使用组件实例时，直接使用ref对象来访问组件实例

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

  componentDidMount() {
    const instance = this.ref.current;
    console.log(instance);
  }

  render() {
    return <div ref={this.ref} />;
  }
}

Ref的注意事项

• Ref只能在函数组件和类组件中使用。
• 在函数组件中，必须使用useRef hook来创建ref对象。
• 在类组件中，可以在构造函数中使用React.createRef()来创建ref对象。
• 在DOM元素上添加ref属性时，必须使用ref属性。
• 在需要使用DOM元素或组件实例时，可以使用ref对象来访问。
• Ref对象是一个可变对象，这意味着它可以在组件的生命周期中被改变。
• 在组件卸载时，必须清除ref对象上的事件监听器。