当组件卸载时运行 React 钩子

卸载组件时，使用 useEffect 钩子运行react钩子。 我们从 useEffect 钩子返回的函数在组件卸载时被调用，可用于清理目的。

import {useRef, useEffect, useState} from 'react';

function Child() {
  const ref = useRef(null);

  useEffect(() => {
    const handleClick = event => {
      console.log('Button clicked');
    };

    const element = ref.current;

    element.addEventListener('click', handleClick);

    // 👇️ run function when component unmounts 👇️
    return () => {
      console.log('Child unmounted');
      element.removeEventListener('click', handleClick);
    };
  }, []);

  return (
    <div>
      <button ref={ref}>Click</button>
    </div>
  );
}

const App = () => {
  const [isMounted, setIsMounted] = useState(true);

  return (
    <div>
      <button onClick={() => setIsMounted(current => !current)}>
        Toggle child
      </button>

      <hr />

      {isMounted && <Child />}
    </div>
  );
};

export default App;

我们使用 useEffect 钩子在组件卸载时运行一些逻辑。

useEffect(() => {
  const handleClick = event => {
    console.log('Button clicked');
  };

  const element = ref.current;

  element.addEventListener('click', handleClick);

  // 👇️ run function when component unmounts 👇️
  return () => {
    console.log('Child unmounted');
    element.removeEventListener('click', handleClick);
  };
}, []);

我们从 useEffect 返回的函数将在组件卸载时被调用。

我们传递给 useEffect 的第二个参数是一个依赖数组。 示例中的钩子不依赖于任何外部变量，因此依赖项数组为空。

我们传递给 useEffect 的函数将在组件挂载时被调用，而我们返回的函数将在组件卸载时被调用。

清理功能通常用于删除任何以前添加的事件侦听器以避免内存泄漏。

如果你不想在组件挂载时运行任何逻辑，你可以直接返回你的清理函数。

useEffect(() => {
  // 👇️ run function when component unmounts 👇️
  return () => {
    console.log('Child unmounted');
  };
}, []);

火焰兔

海报 链接