认识

2023年02月22日

柏拉文

越努力，越幸运

一、认识

---

useImperativeHandle 是 React 中的一个 Hook，它能让你自定义由 ref 暴露出来的句柄。

二、语法

---

父组件

import React,{ useRef } from "react";

const Child = forwardRef((prop,ref)=>{

  const childRef: RefObject<{ say: () => void }> = useRef(null);
 
  const fun = ()=>{
    childRef.current?.say();
  }

  return <div>
    <h3>子组件</h3>
    <Child ref={childRef} />
  </div>
});

子组件

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

const Child = forwardRef((prop,ref)=>{
  const say = ()=>{
    console.log("子组件说话");
  }

  useImperativeHandle(ref,()=>{
    return {
      say
    }
  },[]);

  return <div>子组件</div>
});

• ref: 该 ref 是你从 forwardRef 渲染函数 中获得的第二个参数。

• createHandle: 该函数无需参数，它返回你想要暴露的 ref 的句柄。该句柄可以包含任何类型。通常，你会返回一个包含你想暴露的方法的对象。

• 可选的dependencies: 函数 createHandle 代码中所用到的所有反应式的值的列表。反应式的值包含 props、状态和其他所有直接在你组件体内声明的变量和函数。倘若你的代码检查器已 为 React 配置好，它会验证每一个反应式的值是否被正确指定为依赖项。该列表的长度必须是一个常数项，并且必须按照 [dep1, dep2, dep3] 的形式罗列各依赖项。React 会使用 Object.is 来比较每一个依赖项与其对应的之前值。如果一次重新渲染导致某些依赖项发生了改变，或你没有提供这个参数列表，你的函数 createHandle 将会被重新执行，而新生成的句柄则会被分配给 ref。

• 返回值: useImperativeHandle 返回 undefined。

三、用法

---

3.1 向父组件暴露元素

父组件

import React,{ useRef } from "react";

const Child = forwardRef((prop,ref)=>{

  const childRef: RefObject<{ say: () => void }> = useRef(null);
 
  console.log(childRef.current)

  return <div>
    <h3>子组件</h3>
    <Child ref={childRef} />
  </div>
});

子组件

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

const Child = forwardRef((prop,ref)=>{

  return <div>
      <h3> 子组件 </h3>
      <input ref={ref} />
  </div>
});

3.2 向父组件暴露方法

父组件

import React,{ useRef } from "react";

const Child = forwardRef((prop,ref)=>{

  const childRef: RefObject<{ say: () => void }> = useRef(null);
 
  const fun = ()=>{
    childRef.current?.say();
  }

  return <div>
    <h3>子组件</h3>
    <Child ref={childRef} />
  </div>
});

子组件

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

const Child = forwardRef((prop,ref)=>{
  const say = ()=>{
    console.log("子组件说话");
  }

  useImperativeHandle(ref,()=>{
    return {
      say
    }
  },[]);

  return <div>子组件</div>
});