React 进阶面试题, React 中 refs 的作用是什么?有哪些应用场景?

Step 1

Q:: React 中 refs 的作用是什么？

A:: 在 React 中，refs（引用）是用来直接访问 DOM 元素或 React 组件实例的方式。通常情况下，React 提倡通过 state 和 props 来管理数据流和组件交互，但在某些情况下，直接访问 DOM 元素是不可避免的，例如需要操作未被 React 控制的第三方库或者需要直接读取某些 DOM 元素的属性时，使用 refs 是非常有用的。

Step 2

Q:: refs 的应用场景有哪些？

A:: 1. 管理焦点、文本选择或媒体播放。 2. 触发必要的动画。 3. 与第三方 DOM 库集成。 4. 读取未通过 React 处理的 DOM 元素的值（例如表单元素的值）。 5. 强制组件重新渲染或获取组件实例的状态。

Step 3

Q:: 如何在 React 中创建和使用 refs？

A:: 在 React 中，可以使用 React.createRef() 创建一个 ref 对象，然后将其附加到 JSX 元素上，通过 this.refs 或者 ref.current 访问对应的 DOM 元素或组件实例。例如：

 
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
 
  componentDidMount() {
    console.log(this.myRef.current); // 访问 DOM 元素
  }
 
  render() {
    return <div ref={this.myRef}>Hello, world!</div>;
  }
}
 

Step 4

Q:: 在函数组件中如何使用 refs？

A:: 在函数组件中，可以使用 useRef Hook 来创建一个 ref 对象，并将其赋值给需要访问的 DOM 元素。与类组件的 ref 不同，useRef 不会触发重新渲染。例子如下：

 
import React, { useRef, useEffect } from 'react';
 
function MyComponent() {
  const myRef = useRef(null);
 
  useEffect(() => {
    console.log(myRef.current); // 访问 DOM 元素
  }, []);
 
  return <div ref={myRef}>Hello, world!</div>;
}
 

Step 5

Q:: 在 React 中使用 refs 有什么限制？

A:: React 中的 refs 应该被谨慎使用，因为它们绕过了 React 的声明式数据流。最好只在无法通过其他方式实现需求的情况下使用 refs。此外，不能在函数组件的 return 语句中直接调用 useRef Hook，而应该在组件的顶层调用 useRef。