React组件卸载清理：AbortController与本地变量标记哪种是更优实践？

优先选择AbortController实现方案，该方案在资源占用、错误处理、场景适配性上都优于本地变量标记方案，具体原因如下：

• 资源释放更彻底：本地变量标记方案只是阻止了组件卸载后的状态更新操作，请求本身还是会完整执行，仍然会占用浏览器的网络、内存资源，当页面存在大量并发请求或大体积请求时，这些无效请求会拖慢页面后续的加载性能。而AbortController会直接中断正在发送的fetch请求，完全释放对应的网络和计算资源。
• 适配更多异步场景：本地变量标记只能处理fetch请求成功后的状态更新拦截，对于axios请求、流式响应、Web Worker任务、计时器等异步场景要么适配成本高要么无法覆盖。而AbortController是Web标准API，目前大部分异步操作都原生支持signal参数，可以统一不同异步任务的终止逻辑。
• 错误处理更可控：你可以在catch分支中通过error.name === 'AbortError'判断是否是主动终止的请求，避免把正常的用户中断操作当成网络错误上报，本地变量标记方案无法感知请求是否被提前终止，无法做对应的错误归类处理。
• 代码可维护性更高：当有多个并行异步请求需要清理时，AbortController只需要实例化一次，所有请求都复用同一个signal即可，清理逻辑只需要调用一次abort；本地变量标记方案需要给每个请求单独加判断逻辑，代码冗余度更高。

本地变量标记方案唯一的优势是不需要处理AbortError的判断，在你不需要考虑请求资源占用、仅需要避免卸载后setState报错的极简场景下可以临时使用，但不推荐作为通用方案使用。

两种实现代码参考 #

1. AbortController实现 #

useEffect(() => {
  const abortCtrl = new AbortController();
  const opts = { signal: abortCtrl.signal };

  fetch(URL, opts)
    .then((response) => response.json())
    .then((data) => setTodo(data))
    .catch((error) => {
      // 过滤主动终止的请求报错
      if (error.name !== 'AbortError') {
        console.log(error.message);
      }
    });

  return () => abortCtrl.abort();
}, []);

2. 本地变量标记实现 #

useEffect(() => {
  let isActive = true;

  fetch(URL)
    .then((response) => response.json())
    .then((data) => {
      if (isActive) {
        setTodo(data);
      }
    })
    .catch((error) => console.log(error.message));

  return () => {
    isActive = false;
  };
}, []);

内容的提问来源于stack exchange，提问作者RAVI TEJA NANI