当组件卸载时运行 react 钩子-ag捕鱼王app官网

卸载组件时，使用 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}>clickbutton>
    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');
  };
}, []);