forwardRef，咋一看长的和useRef很像，既然很像，那么功能必定相似，因此猜想也是使用ref来引用一个DOM的。猜想对不对先不管，可以先回顾一下useRef，这样的话可以方便做个对比。
react官网对forwardRef的解释很简单，大致如下：
React.forwardRef会创建一个React组件，这个组件能够将其接受的ref属性转发到其组件树下的另一个组件中。
React.forwardRef接受渲染函数作为参数。React 将使用 props 和 ref 作为参数来调用此函数。此函数应返回 React 节点。
先对其简单归纳出一个初始印象：
-
React.forwardRef返回的是一个组件 -
React.forwardRef接受一个函数作为参数，这个函数是一个渲染函数，也就是一个组件 - 该渲染函数接受 props 和 ref 作为参数
这里有一个很简单的例子先看看到底是怎么使用的：
import ReactDOM from "react-dom";
import React, { Component, createRef, forwardRef } from "react";
const FocusInput = forwardRef((props, ref) => (
<div>
<input type="text" ref={ref} />
</div>
));
class App extends Component {
constructor(props) {
super(props);
this.ref = createRef();
}
onButtonClick = () => {
this.ref.current.focus();
};
render() {
return (
<div>
<button onClick={this.onButtonClick}>Focus the input</button>
子组件内容：{this.ref.current.value}
<FocusInput ref={this.ref} />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("container"));
从这个例子的使用中来看，forwardRef与useRef完全不是同一个东西，前者的形态是类似于一个高阶函数（不直接接受组件作为参数，但仍返回一个组件），只是在参数函数中向其传入 ref 参数，然后内部 ref 附着给谁，谁就被外界使用this.ref.current拿到。
看起来forwardRef实现的功能就是外层组件可以通过 ref 直接控制内层组件或元素的行为，简单的来说，就像其名字给出的信号：透传。
上面这个例子如果不使用forwardRef会报出错误。ref不能直接用在一个函数式组件上，需要使用forwardRef将该函数组件包裹，否则爆出如下错误：
image.png
那么如果用在一个calss组件上，并且将其传入class组件内部元素上呢？答案式无法做到。经过尝试，calss组件上只能在组件层面使用ref，而其内部元素是无法使用的。
constructor(props, ref) {
super();
this.inputRef = ref; // 1.尝试给到一个变量
}
render() {
return (<div>
<input type="text" />
<input type="text" ref ={this.inputRef} /> // 2.很明显是错误的语法
</div>)
}
}
因此forWardRef就解决了这个透传的问题。
