React之useImperativeHandle子组件自定义函数（方法）暴漏给父组件

什么是 useImperativeHandle？

本质上其实是子组件将自己内部的函数(方法)通过useImperativeHandle添加到父组件中useRef定义的对象中。
useImperativeHandle 允许你自定义通过 ref 暴露给父组件的实例值。通常，我们使用 ref 来访问组件的 DOM 元素或类组件的实例。但有时，我们可能希望向父组件暴露子组件的某些特定方法，而不是整个实例或 DOM 元素。这时，useImperativeHandle 就派上了用场。

基本用法1

当你想从子组件向父组件暴露某些特定的方法时，可以使用 useImperativeHandle。

子组件：

image.png

父组件：

        <View id='carView'>
          <UserCar
            car={car}
            combinedSpecification={combinedSpecification}
            onClickTyre={() => { ...do something }}
          />
        </View>

基本用法2

import React, { useRef, useImperativeHandle, forwardRef } from "react";
// Child 
const Child = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    sayHello() {
    console.log("Hello from Child!");
  },
  }));
  return <div>Child Component</div>;
  });

  // Parent
  function Parent() {
  const childRef = useRef(null);
  const handleClick = () => {
      childRef.current.sayHello();
  };
  return (
    <><Child ref={childRef} /><button onClick={handleClick}>Call Child Method</button></>
  );
}

与其他 Hooks 结合使用

useImperativeHandle 可以与其他 Hooks 如 useState 和 useEffect 结合使用。

// Child 
const Child = forwardRef((props, ref) => {
  const [count, setCount] = useState(0);
  useImperativeHandle(ref, () => ({
    increment() {
      setCount((prevCount) => prevCount + 1);
    },
    decrement() {
      setCount((prevCount) => prevCount - 1);
    },
  }));
  useEffect(() => {
    console.log(`Count changed to ${count}`);
  }, [count]);
  return <div>Count: {count}</div>;
});

依赖数组

useImperativeHandle 的第三个参数是一个依赖数组，与 useEffect 和 useMemo 中的依赖数组类似。这个依赖数组决定了何时重新创建暴露给父组件的实例方法。当依赖数组中的值发生变化时，useImperativeHandle 会重新执行。

const Child = forwardRef((props, ref) => {
  const [count, setCount] = useState(0);
    useImperativeHandle(
      ref,
    () => ({
    getCurrentCount() {
      return count;
    },
  }),[count]);
  return <div>Count: {count}</div>;
});

结合useRef、React.forwardRef一起使用