React useComponentWillUnmount钩子

在组件卸载和销毁之前立即执行回调函数。

  • 使用useEffect()钩子,将空数组作为第二个参数。返回提供的回调函数,以便在清理之前仅执行一次。
  • 行为类似于类组件的componentWillUnmount()生命周期方法。
const useComponentWillUnmount = onUnmountHandler => {
  React.useEffect(
    () => () => {
      onUnmountHandler();
    },
    []
  );
};

const Unmounter = () => {
  useComponentWillUnmount(() => console.log('组件将卸载'));

  return <div>请查看控制台!</div>;
};

ReactDOM.createRoot(document.getElementById('root')).render(
  <Unmounter />
);