useRef, forwardRef和useImperativeHandle

 三者用处

1.useRef: 用于获取元素的原生DOM或者获取自定义组件所暴露出来的ref方法(父组件可以通过ref获取子组件，并调用相对应子组件中的方法)

2.useImperativeHandle:在函数式组件中，用于定义暴露给父组件的ref方法。

3.React.forwardRef: 将ref父类的ref作为参数传入函数式组件中，本身props只带有children这个参数，这样可以让子类转发父类的ref,当父类把ref挂在到子组件上时，子组件外部通过forwardRef包裹，可以直接将父组件创建的ref挂在到子组件的某个dom元素上

React.forwardRef 会创建一个React组件，这个组件能够将其接受的 ref 属性转发到其组件树下的另一个组件中。这种技术并不常见，但在以下两种场景中特别有用：

1，转发 refs 到 DOM 组件

FormTable可以接受除了props外的ref参数

外部父组件

2，在高阶组件中转发 refs

外部父组件通过ref调用子组件的方法 映射到子组件的useImperativeHandle函数中

外部父组件

内部子组件

案例 ： 将父组件的ref 传递给子组件

子组件：FormTable（表格上方筛选项）

通过引入forwardRef来保证能传入第二个参数 ref，从而外部父组件可以调用此子组件内部的方法。

通过引入useImperativeHandle，来定义暴露给父组件的ref方法。如外部调用fetchData，则调用了useImperativeHandle内部的fetchData，但不会调用子组件内的fetchData。所以需要在useImperativeHandle内部指向  需要调用的方法。

父组件：外部页面引入FormTable

通过引入useRef获取自定义组件所暴露出来的ref方法。将dataTableRef指向子组件FormTable。

正常参数，如api，tableConfig和渲染元素children等可以通过props传入子组件，ref=dataTableRef 通过子组件使用的forwardRef方法的 第二个参数ref传入子组件。

所以需要调用子组件内部方法的，需要将子组件暴露为forwardRef。因为这样才能传入第二个参数ref，才可以用dataTableRef.current.xxx调用子组件内部方法。