由于 useEffect 中有异步操作，当组件卸载后异步操作结束并执行 state 操作，React 就会提醒存在内存泄漏的风险。在 React Hooks 中，解决方法是在异步操作中判断是否组件被卸载了。代码如下：
1
2
3
4
5
6
7
8
9
| function useAsync(asyncFn, onSuccess) {
useEffect(() => {
let isActive = true;
asyncFn().then(data => {
if (isActive) onSuccess(data);
});
return () => { isActive = false };
}, [asyncFn, onSuccess]);
}
|
实际项目中，我们可以使用 ahooks 提供的功能更强大的 useAsyncEffect：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| import { useAsyncEffect } from 'ahooks';
import React, { useState } from 'react';
function mockCheck(): Promise<boolean> {
return new Promise((resolve) => {
setTimeout(() => resolve(true), 3000);
});
}
export default () => {
const [pass, setPass] = useState<boolean>(null);
useAsyncEffect(async () => {
setPass(await mockCheck());
}, []);
return (
<div>
{pass === null && 'Checking...'}
{pass === true && 'Check passed.'}
</div>
);
};
|
