React 进阶面试题, 什么是 React.forwardRef?它的作用是什么?
React 进阶面试题, 什么是 React.forwardRef?它的作用是什么?
QA
Step 1
Q:: 什么是 React.forwardRef？它的作用是什么？
A:: React.forwardRef 是 React 提供的一个高阶组件（HOC），用于将 ref 转发给其子组件中的某个元素。通常在父组件需要直接访问子组件的 DOM 元素或子组件中的某个元素时使用。通过使用 forwardRef，父组件可以获得子组件中 DOM 元素的引用，而不必在子组件中显式传递 ref。它的典型使用场景是在封装自定义组件时，需要让外部组件通过 ref 直接操作 DOM 元素。
Step 2
Q:: 如何使用 React.forwardRef？
A:: 使用 React.forwardRef 时，需要将其作为参数传递给函数组件，该函数组件会接受 props 和 ref 作为参数，并将 ref 传递给某个 DOM 元素或其他组件。例如：
const MyInput = React.forwardRef((props, ref) => (
<input ref={ref} {...props} />
));
此时，父组件可以通过 ref 直接访问 MyInput 组件中的 input 元素。
Step 3
Q:: React.forwardRef 和 React.createRef 有什么区别？
A:: React.createRef 是用于创建一个 ref 对象，该对象可以通过 ref 属性附加到 React 元素上，并允许我们在父组件中访问子组件的 DOM 元素或组件实例。而 React.forwardRef 是用于将 ref 直接转发给子组件，使得父组件可以通过 ref 访问子组件内部的某个元素。两者通常结合使用，即通过 createRef 创建 ref，并通过 forwardRef 转发 ref。
Step 4
Q:: forwardRef 可以与 class 组件一起使用吗？
A:: 可以，但通常不直接在 class 组件中使用 forwardRef。forwardRef 主要用于函数组件中，使函数组件也能够接收 ref 并将其转发。在 class 组件中，我们通常直接使用 React.createRef() 来创建 ref，并通过 this.ref 访问子组件的 DOM 元素。
Step 5
Q:: 在什么场景下你会使用 React.forwardRef？
A:: React.forwardRef 通常在以下场景使用：1) 需要将 ref 转发给子组件中的某个 DOM 元素时，例如封装一个输入框组件并需要暴露其 focus 方法；2) 在高阶组件中，想要将 ref 传递给子组件而不是 HOC 本身；3) 需要兼容老旧代码或第三方库，需要将 ref 传递给内部的 DOM 元素。