React 组件销毁需要注意的异步更新问题笔记

# 问题描述

组件销毁，闭包内部的异步逻辑还会继续。存在什么问题？

状态不会正常更新，这个符合预期。原因是 React 内部做了处理，在销毁的组件中更新状态不会成功会出警告：Warning: Can't perform a React state update on an unmounted component
其他副作用会生效，可能影响页面状态。

如何解决这两个问题？

# 解决方案

包装一个 hook ，提供一个异步处理器，并在 unmount 状态下关闭这个处理器。

下面是一个简单的示例代码：

export function useFetch = (config, deps) => {
  const abortController = new AbortController()
  const [loading, setLoading] = useState(false)
  const [result, setResult] = useState()

  useEffect(() => {
    setLoading(true)
    fetch({
      ...config,
      signal: abortController.signal
    }).then(res => setResult(res))
      .finally(_ => setLoading(false))
  }, deps)

  useEffect(() => {
    return () => abortController.abort()
  }, [])

  return { result, loading }
}

const { loading, result } = useFetch({ url: 'xxx' }, [])

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

上面是一个立即调用请求的 hook ，不一定好用，业务上一般是在特定时机下才发起请求。

生产环境下可以考虑使用 ahooks 的 useRequest (opens new window)

# 拓展阅读

编辑

上次更新: 2024/09/01, 23:56:56

← React Hooks 实现原理 React项目结构规范→