解决问题

1. 能够获取对dom的引用
2. 缓存一些不需要视图更新的数据

使用案例

1. 如果想去父组件里面引用子组件，该如何去做呢？
2. 首先在父组件里面创建ref ,其次通过forwardRef 来转发子组件里的ref到父组件里面。
3. 同时如果想自定义修改子组件转发的ref 可以使用useImperativeHandle 来进行处理。

import { useImperativeHandle, useRef } from 'react';
import { useEffect } from 'react';
import React from 'react';
interface RefProps {
  aaa: () => void;
}
const Test: React.ForwardRefRenderFunction<RefProps> = (props, ref) => {
    const inputRef = useRef<HTMLInputElement>(null);

  useImperativeHandle(ref, () => {
    return {
      aaa() {
        inputRef.current?.focus();
      }
    }
  }, [inputRef]);
  return <div>
    <input ref={inputRef}></input>
  </div>
}

const WrapedTest = React.forwardRef(Test);

function App() {
  const ref = useRef<RefProps>(null);
 
  useEffect(()=> {
    console.log('ref', ref.current)
    ref.current?.aaa()
  }, []);

  return (
    <div className="App">
      <WrapedTest ref={ref}/>
    </div>
  );
}

export default App;