React.forwardRef

• React.forwardRef 允许某些组件接收 ref（ref 是为了获取某个节点的实例），并将其向下传递给 子组件
• React.forwardRef的API中ref必须指向dom元素而不是React组件

forwardRef 与 Hook useImperativeHandle

useImperativeHandle 在使用 ref 时可以自定义暴露给父组件的实例值。在大多数情况下，应当避免使用 ref 这样的命令式代码。useImperativeHandle 应当与 forwardRef一起使用：

function FancyInput(props, ref) {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  return <input ref={inputRef} ... />;
}
FancyInput = forwardRef(FancyInput);

没使用Hook useImperativeHandle时的代码

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

class TestComponent extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef(); // 创建 ref 存储 textRef DOM 元素
  }
  componentDidMount() {
    this.inputRef.current.value = 'forwardRef'    
  }
  render() {
    return ( // 可以直接获取到 ForwardInput input 的 ref：
      <ForwardInput ref={this.inputRef}>
    )
  }
}

相关链接