React | 浏览器刷新，会执行 useEffect 的 卸载函数吗？

React | 浏览器刷新，会执行 useEffect 的 卸载函数吗？

#需求描述

后端在跑一个长期的异步上传任务，在任务执行过程中，用户刷新页面（f5），此时产品希望能够发送一个 kill 任务，杀掉这个任务。

拆解

#需求合理性

• 其他情况是否存在类似：比如关闭 tab，关闭浏览器，突然断网等操作，等浏览器层级或者异常的用户行为
• 前端是否应该响应这种行为：对于更深层次的需求处理
• 根本问题点，或者说为什么会存在这个需求：上一个任务会加锁，下一次任务，提示的文案用户看不懂（有个锁还在）

#刷新涉及到什么

• 刷新时候，浏览器会做什么
• react 页面的组件卸载如何进行的
• useEffect 的卸载返回函数是否会执行？
• 整个页面的所有任务是如何被处理的（xhr,timer,dom,webworker等）

#浏览器刷新页面，dom，xhr，script 会被怎么处理

1. 取消网络请求： 当页面被刷新时，浏览器通常会取消当前正在进行的网络请求。这意味着尚未完成的请求将被中止，并且可能无法得到服务器的响应。
2. 清除页面状态：页面刷新会导致当前页面的状态和数据被清除。这包括JavaScript变量、DOM元素状态以及其他页面相关的数据。刷新后，页面将重新加载，并且处于初始状态。
3. 重新加载页面资源：刷新页面时，浏览器会重新加载所有页面资源，包括HTML、CSS、JavaScript文件等。这可能导致较长的加载时间，特别是对于较大的资源文件。
4. 触发页面生命周期事件：刷新页面会触发一系列页面生命周期事件，例如beforeunload、unload、DOMContentLoaded等。你可以利用这些事件来执行特定的操作，例如保存数据、清理资源等。
5. 丢失非持久化的数据：刷新页面会导致非持久化的数据的丢失。这包括表单输入、暂存的状态、临时存储的数据等。如果需要在刷新后恢复这些数据，可以使用本地存储或其他持久化机制。
6. 重新加载缓存的资源：浏览器在缓存中保存已下载的资源，例如图片、样式表等。当页面刷新时，浏览器会检查缓存，并重新加载已过期或修改的资源。
7. Web Worker 是在后台运行的JavaScript线程，独立于主线程（页面）运行。它可以执行复杂的计算或处理任务，而不会阻塞主线程的运行。当页面被刷新或关闭时，Web Worker的行为如下：
   • 刷新时：当页面被刷新时，Web Worker会被终止。它的运行状态和数据将被销毁。
   • 关闭时：如果页面被关闭（例如用户关闭了浏览器选项卡），Web Worker也会被终止。

#浏览器刷新，react 组件会怎么被卸载

React会销毁当前的组件树，并重新渲染整个应用程序。这个过程会导致卸载之前的组件，并创建新的组件实例。但不会触发当前组件的卸载操作，也不会执行useEffect的清理函数。清理函数只会在组件被显式卸载时执行，或者在下一次useEffect运行之前执行。

#显式卸载和隐式卸载。

• 显式卸载是指通过对组件进行操作，明确地将其从组件树中移除。这通常是通过调用React提供的卸载函数来实现的，例如使用ReactDOM.unmountComponentAtNode(container)从DOM中卸载组件。

• 隐式卸载是指组件被React自动卸载，而不需要显式的操作。这种情况通常发生在组件的父组件卸载、组件树重建或者应用程序刷新等情况下。

在显式卸载的情况下，组件会触发卸载生命周期方法，例如componentWillUnmount（对于类组件）或useEffect的清理函数（对于函数组件中的useEffect）。这些方法可以用于执行清理操作，例如取消订阅、清除定时器、释放资源等。

总结起来，显式卸载是指通过手动操作从组件树中移除组件，而隐式卸载是指在特定情况下由React自动移除组件。在显式卸载时，可以执行一些清理操作以确保资源的正确释放。