useEffect
是 React 中的一个 Hook,用于在函数组件中执行副作用操作,比如数据获取、订阅或手动更改 DOM 等。异步生成器是一种可以在执行过程中暂停和恢复的异步迭代器。
使用异步生成器结合 useEffect
可以更优雅地处理异步操作,特别是在需要取消订阅或清理副作用时。
useEffect
中返回一个函数,用于清理副作用。async function*
定义的生成器函数。当你需要在组件卸载时取消订阅或清理副作用时,可以使用异步生成器结合 useEffect
。
useEffect
中取消订阅更新?在 useEffect
中使用异步生成器时,可以通过返回一个清理函数来取消订阅。这个清理函数会在组件卸载时执行。
import React, { useEffect } from 'react';
const MyComponent = () => {
useEffect(() => {
const unsubscribe = async function* () {
let count = 0;
while (true) {
await new Promise(resolve => setTimeout(resolve, 1000));
console.log(`Count: ${count++}`);
if (count > 5) break;
}
};
const gen = unsubscribe();
const iterator = gen[Symbol.asyncIterator]();
const subscription = setInterval(() => {
iterator.next();
}, 1000);
return () => {
clearInterval(subscription);
};
}, []);
return <div>Check the console for logs</div>;
};
export default MyComponent;
unsubscribe
,它会每隔一秒打印一次计数器的值。gen[Symbol.asyncIterator]()
获取迭代器。setInterval
定时调用迭代器的 next
方法。useEffect
中返回一个清理函数,用于清除定时器,从而取消订阅。通过这种方式,你可以在组件卸载时取消订阅,避免内存泄漏和不必要的副作用操作。
领取专属 10元无门槛券
手把手带您无忧上云