React useImperativeHandle处理组件状态和生命周期用法详解

import React, { useRef, useImperativeHandle, forwardRef } from "react";
const Child = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    sayHello() {
      console.log("Hello from Child!");
    },
  }));
  return <div>Child Component</div>;
});
function Parent() {
  const childRef = useRef(null);
  const handleClick = () => {
    childRef.current.sayHello();
  };
  return (
    <>
      <Child ref={childRef} />
      <button onClick={handleClick}>Call Child Method</button>
    </>
  );
}

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>;
});

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