用简单的方式理解 React useImperativeHandle Hook，不再疑惑

2023-10-01 03:26:25

你可能遇到的疑问

为什么 ref 不属于 props，反而需要 forwardRef 呢？
为什么 ref 不是 refs 呢？
什么是 useImperativeHandle Hooks？

别担心，你并不孤单 。许多前端开发者在刚开始接触 React useImperativeHandle Hook 时，都会产生同样的疑问。这篇文章将为你一一解答这些问题，并通过示例代码来演示如何使用 useImperativeHandle Hook 来解决实际问题。

从理解 useRef 和 forwardRef 开始

在开始学习 useImperativeHandle Hook 之前，我们需要先了解一下 useRef 和 forwardRef 这两个概念。

useRef

useRef 是一个 React 内置的 Hook，它允许你在函数组件中创建和维护一个可变的引用对象。useRef 返回一个包含 {current} 属性的对象，这个属性可以被用来存储任何值，包括 DOM 节点、函数等。

forwardRef

forwardRef 是一个 React 高阶组件，它允许你在函数组件中使用 ref。当你在函数组件中使用 forwardRef 时，你实际上是在将 ref 传递给该组件的子组件。

什么是 useImperativeHandle Hook？

useImperativeHandle Hook 允许父组件直接访问子组件的实例。这在某些情况下非常有用，例如当我们需要在父组件中访问子组件的某些方法或属性时。

useImperativeHandle Hook 接受两个参数：

ref：这是要被修改的 ref 对象。
factory：这是一个函数，它将返回一个对象，该对象将被挂载到 ref 对象上。

useImperativeHandle Hook 的使用场景

useImperativeHandle Hook 的使用场景有很多，这里列举一些常见的场景：

在父组件中访问子组件的某些方法或属性。
在子组件中实现自定义行为，并在父组件中控制这些行为。
在子组件中创建引用，以便在父组件中使用。

useImperativeHandle Hook 的示例代码

为了更好地理解 useImperativeHandle Hook 的用法，我们来看一个示例代码：

import React, { useRef, forwardRef, useImperativeHandle } from "react";

const ChildComponent = forwardRef((props, ref) => {
  const inputRef = useRef();

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
  }));

  return <input ref={inputRef} />;
});

const ParentComponent = () => {
  const childRef = useRef();

  const handleClick = () => {
    childRef.current.focus();
  };

  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
};

export default ParentComponent;

在这个示例代码中，我们创建了一个 ChildComponent 组件，并在该组件中使用 useRef 创建了一个 inputRef 引用。然后，我们在 ChildComponent 中使用 useImperativeHandle Hook 将 focus 方法挂载到 inputRef 引用上。这样，父组件 ParentComponent 就可以通过 childRef.current.focus() 来调用 ChildComponent 中的 focus 方法，从而聚焦输入框。