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
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)
# 拓展阅读
编辑 (opens new window)
上次更新: 2023/08/23, 09:32:05