面试题-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 ;
  }
}

2. this.refs(废弃):

class MyComponent extends React.Component {

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

  render() {
    return ;
  }
}

3. React.createRef()(类组件):

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

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

  render() {
    return ;
  }
}

4. useRef钩子(函数组件):

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

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

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

  return ;
}

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

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钩子不仅具有灵活性,还有助于提高代码的可维护性和性能。

你可能感兴趣的:(React面试题,react,面试题,react.js,javascript,前端)