forwardRef

在React中，forwardRef是一个高级特性，用于在组件之间转发ref。它允许你获取对子组件中的DOM元素或组件实例的引用。forwardRef通常用于以下场景：

1. 包装第三方组件：当你使用第三方UI库的组件时，可能想要直接访问这些组件内部的DOM元素或方法，而不是通过props进行传递。通过使用forwardRef，你可以将ref传递给封装的第三方组件，以便直接操作其内部的DOM或方法。

2. 父组件访问子组件的实例或DOM：有时，父组件需要访问子组件的实例或其内部的DOM元素。通过使用forwardRef，你可以在子组件中封装并暴露ref，使得父组件能够直接引用子组件实例或DOM元素。

3. 高阶组件（HOC）中的ref传递：当你使用高阶组件来增强或修改组件时，可能需要将ref正确地传递到被包装的组件中。forwardRef可以帮助你在HOC中正确地转发ref，确保ref在组件层次结构中正确传递和使用。

下面是一个使用forwardRef的示例：

import React, { forwardRef } from 'react';

const FancyInput = forwardRef((props, ref) => {
  return <input ref={ref} {...props} />;
});

const ParentComponent = () => {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <FancyInput ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
};

在上面的示例中，FancyInput组件使用了forwardRef来转发ref。父组件ParentComponent可以通过将ref传递给FancyInput来获取对输入框的引用，并在点击按钮时聚焦该输入框。

通过使用forwardRef，你可以方便地访问子组件内部的DOM元素或实例，并实现更灵活和可复用的组件逻辑。