react useRef、forwardRef和useImperativeHandle的使用

一、useRef

const refContainer = useRef(initialValue);

useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内持续存在，这个ref对象只有一个current属性，你把一个东西保存在内，它的地址一直不会变。

一个常见的用例便是命令式地访问子组件：

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` 指向已挂载到 DOM 上的文本输入元素
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

• 本质上，useRef 就像是可以在其 .current 属性中保存一个可变值的“盒子”。
• ref 是一种访问DOM节点的主要方式，如果将 ref 对象以 <div ref={myRef} /> 形式传入组件，则无论该节点如何改变，React 都会将 ref 对象的 .current 属性设置为相应的 DOM 节点。
• 然而，useRef() 比 ref 属性更有用，它可以很方便的保存任何可变值，其类似于在 class 中使用实例字段的方式。这是因为它创建的是一个普通 Javascript 对象。而 useRef() 和自建一个 {current: ...} 对象的唯一区别是，useRef 会在每次渲染时返回同一个 ref 对象。
• 请记住，当 ref 对象内容发生变化时，useRef 并不会通知你。变更 .current 属性不会引发组件重新渲染，也可以理解为useRef变化不会主动使页面渲染。如果想要在 React 绑定或解绑 DOM 节点的 ref 时运行某些代码，则需要使用[回调 ref](https://zh-hans.reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node) 来实现。

二、useImperativeHandle

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

三、forwardRef

React.forwardRef字面意思理解为转发Ref，它会创建一个React组件，这个组件能够将其接受的 ref 属性转发到其组件树下的另一个组件中。

转发refs到DOM组件（ref不像props作为参数可以传递，所以要想传递ref得用forwardRef）

interface FancyInputRef {
focus: () => void;
}
interface IProps {}
export const FancyInput = forwardRef<FancyInputRef, IProps>((props, ref) => {
const inputRef = useRef(null);
useImperativeHandle(ref, () => ({
focus: () => {
inputRef.current?.focus(); // 父组件可以使用ref.current.focus()来锁定光标
},
}));
return ;
});

const TestComp = () => {
const ref = useRef(null);
const handleClick = () => {
ref.current?.focus(); // 此时就把光标锁定到输入框中
};
return (
<>

click me!
</>
);
};
子组件暴露出来的focus在父组件就可以使用ref.current?.focus() 来调用进行使用。