掌握 React 的 useComponentWillUnmount 钩子

简介

在本实验中，我们将探索 React 中的 useComponentWillUnmount 钩子，它允许我们在组件卸载和销毁之前立即执行一个回调函数。通过使用这个钩子，我们可以执行任何必要的清理任务，比如移除事件监听器或取消任何挂起的请求。本实验将提供使用这个钩子的实际经验，并理解其行为，它类似于类组件中的 componentWillUnmount() 生命周期方法。

这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个初级级别的实验，完成率为 100%。获得了学习者 100% 的好评率。

React 的 useComponentWillUnmount 钩子

虚拟机中已提供 index.html 和 script.js。一般来说，你只需在 script.js 和 style.css 中添加代码。

要在组件卸载和销毁之前立即执行一个回调函数，你可以使用 useEffect() 钩子，并将空数组作为第二个参数。返回提供的回调函数，使其仅在清理之前执行一次。这种行为类似于类组件的 componentWillUnmount() 生命周期方法。你也可以使用以下代码片段创建一个自定义钩子 useComponentWillUnmount()，它接受一个 onUnmountHandler 函数作为参数，并在组件卸载之前执行它：

const useComponentWillUnmount = (onUnmountHandler) => {
  React.useEffect(
    () => () => {
      onUnmountHandler();
    },
    []
  );
};

然后，你可以在函数式组件中像这样使用这个自定义钩子：

const Unmounter = () => {
  useComponentWillUnmount(() => console.log("Component will unmount"));

  return <div>Check the console!</div>;
};

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

当组件即将卸载时，这将在控制台中输出 "Component will unmount"。

请点击右下角的“Go Live”以在端口 8080 上运行 Web 服务。然后，你可以刷新“Web 8080”标签页来预览网页。

总结

恭喜你！你已经完成了 React 的 useComponentWillUnmount 钩子实验。你可以在 LabEx 中练习更多实验来提升你的技能。