何时使用useImperativeHandle，useLayoutEffect和useDebugValue

我不明白为什么需要以下useImperativeHandle，useLayoutEffect和useDebugValue挂钩，您可以在可以使用它们的情况下提供示例，但请从文档中获取示例。

请允许我通过说所有这些钩子很少使用来对这个答案做一个开头。99％的时间，您将不需要这些。它们仅旨在涵盖一些罕见的极端情况。

useImperativeHandle

通常，在使用时会为useRef您提供ref附加到该组件的实例值。这使您可以直接与DOM元素进行交互。

useImperativeHandle 非常相似，但是它可以让您做两件事：

它使您可以控制返回的值。您无需显式声明返回值，而无需返回instance元素（请参见下面的代码段）。

它可以让你更换本地函数（如blur，focus用自己的功能，等等），从而使副作用的正常行为，或者不同的行为完全。虽然，您可以随意调用该函数。

您可能要执行上述任一操作可能有很多原因；您可能不想将本机属性公开给父级，或者您想更改本机函数的行为。可能有很多原因。但是，useImperativeHandle很少使用。

useImperativeHandle 自定义使用时暴露给父组件的实例值 ref

例

在此示例中，我们将从中获得的值ref将仅包含在中blur声明的函数useImperativeHandle。它不会包含任何其他属性（我正在记录该值来演示此内容）。该函数本身也被“定制”为与通常期望的行为不同。在这里，它会document.title在blur调用时设置和模糊输入。

const MyInput = React.forwardRef((props, ref) => {
  const [val, setVal] = React.useState('');
  const inputRef = React.useRef();

  React.useImperativeHandle(ref, () => ({
    blur: () => {
      document.title = val;
      inputRef.current.blur();
    }
  }));

  return (
     setVal(e.target.value)}
      {...props}
    />
  );
});

const App = () => {
  const ref = React.useRef(null);
  const OnBlur= () => {
    console.log(ref.current); // Only contains one property!
    ref.current.blur();
  };

  return ;
};

ReactDOM.render(, document.getElementById("app"));