每天一个hooks学习之useUnmount

const useUnmount = (fn: () => void) => {
  const fnRef = useRef(fn);
  fnRef.current = fn;
  useEffect(() => () => fn?.(), []);
};

import { useEffect, useRef, useState } from "React";
// 自定义useUnmount hooks
const useUnmount = (fn: () => void) => {
  const fnRef = useRef(fn);
  fnRef.current = fn;
  useEffect(() => () => fn?.(), []);
};
const Child = () => {
  useUnmount(() => {
    console.log("子组件销毁了");
  });
  return <div>我是子组件</div>;
};
const UseUnmountDemo = () => {
  const [showChild, setShowChild] = useState(true);
  return (
    <>
      {showChild && <Child />}
      <button onClick={() => setShowChild(!showChild)}>显示销毁子组件</button>;
    </>
  );
};
export default UseUnmountDemo;