面试题-React(十三)：React中获取Refs的几种方式

一、Refs的基本概念

Refs是React提供的一种访问DOM元素或组件实例的方式。通过Refs，我们可以在React中获取到底层的DOM节点或组件实例，并进行一些操作。Refs的使用场景包括但不限于：访问DOM属性、调用组件方法、获取输入框的值等。

二、获取Refs的几种方式

在React中，有几种方式可以获取Refs：

1. 回调函数方式（不推荐）：

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

  handleRef = ref => {
    this.myRef = ref;
  };

  render() {
    return ;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2. this.refs（废弃）：

class MyComponent extends React.Component {

  handleRef = () => {
    console.log(this.refs.btn);
  };

  render() {
    return 获取refs;
  }
}
1
2
3
4
5
6
7
8
9
10

3. React.createRef()（类组件）：

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

  componentDidMount() {
    this.myRef.current.focus();
  }

  render() {
    return ;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

4. useRef钩子（函数组件）：

import React, { useRef, useEffect } from 'react';

function MyComponent() {
  const myRef = useRef();

  useEffect(() => {
    myRef.current.focus();
  }, []);

  return ;
}
1
2
3
4
5
6
7
8
9
10
11

三、各种方式的优缺点分析

1. 回调函数方式

回调函数方式是React早期版本中主要的Refs获取方式之一。通过回调函数，在组件渲染时可以将DOM元素或组件实例的引用存储在实例变量中。

优点：

• 在React 16.3之前是一种常用的获取Refs方式。

缺点：

• 不够直观，可读性较差。
• 每次渲染都会执行回调函数，可能引起性能问题。
• 难以在函数组件中使用。

2. this.refs（废弃）

this.refs是早期版本中获取Refs的一种方式，但在React 16.3后被废弃，不推荐使用。

优点：

• 直接通过this.refs获取，简单易用。

缺点：

• 已被废弃，不再被官方推荐使用。
• 不支持在函数组件中使用。
• 可能造成性能问题，因为它与组件更新机制不太匹配。

3. React.createRef()

React.createRef()是在类组件中获取Refs的现代方式，通过创建Ref对象来引用DOM元素或组件实例。

优点：

• 直观，适用于类组件。
• 使用current属性访问Ref引用。

缺点：

• 不能在函数组件中使用。
• 需要手动创建Ref对象。

4. useRef钩子

useRef钩子是在函数组件中获取Refs的推荐方式，同时也适用于存储不引起重新渲染的数据。

优点：

• 适用于函数组件，强大而灵活。
• 可以用于存储其他不引起重新渲染的数据。
• 使用current属性访问Ref引用。

缺点：

• 只适用于函数组件。

推荐方式：

在大多数情况下，推荐使用useRef钩子来获取Refs。它不仅适用于函数组件，还可以用于存储其他非渲染相关的数据，如副作用、状态等。使用useRef钩子不仅具有灵活性，还有助于提高代码的可维护性和性能。