forwardRef 获取实例

https://zh-hans.reactjs.org/docs/forwarding-refs.html
https://tsejx.github.io/react-guidebook/api-reference/react/forward-ref/

子组件

import {forwardRef} from 'react';
const InputForward = forwardRef((props, ref) => {
  return (
    <Input ref={ref}/>
  )
});
export default InputForward;

父组件

import InputForward from './InputForward';
function App() {
  const inputRef = useRef();
  return (<InputForward ref={inputRef}/>)
}

应用场景：

• 封装的组件库，获取hooks函数组件引用
• ref不能通过 props作为参数可以传递，所以要想传递 ref得用forwardRef
  • 当 React 附加了 ref 属性之后，ref.current 将直接指向 DOM 元素实例
• ref 的作用是获取实例，可能是 DOM 实例，也可能是 ClassComponent 的实例
• 如果获取的组件是一个 FunctionComponent 的话，是没有实例的（PureComponent），此时用 ref 去传递会报错

props 不能传递 ref

用 ref 获取子组件，也可以理解为子组件向父组件暴露 DOM 引用。
只有 FunctionComponent 才用得到 forwardRef，ClassComponent 不需要
https://zh-hans.reactjs.org/docs/forwarding-refs.html

forwardRef 包裹的组件，导出类型为 object

const SelectRef = forwardRef(PlanSelect);
export default SelectRef;
// typeof SelectRef object

控制台报错 React.forwardRef

原因：使用了connect方法，在connect第四个参数，设置在父组件中使用ref

子组件用 forwardRef包裹

FormRef.js

import React, { forwardRef } from 'react'
const FormRef = forwardRef((props, ref) => {
    return <input ref={ref}/>
});
export default FormRef;

父组件调用时，传递 ref属性

import { useRef } from 'react';
import Form from './FormRef';
function App() {
  const formRef = React.useRef()
  return (
      <Form ref={formRef}/>
  )
}

redux 中的 connect 方法将组件包装成高阶组件（HOC），那么我如何通过 ref 去获取包装前的组件实例？

useImperativeHandle

https://juejin.cn/post/6968664212348338206
只暴露特定的方法，没有用 useImperativeHandle会获取整个实例的方法和属性

updateForwardRef

更新 ref指向，及被 React.forwardRef包裹的 FunctionComponent