bug: RN项目使用useRequest后切换后台切换导致卡顿 #80
Description
版本
- taro-hooks:2.0.10
- taro:4.0.9-beta.8
- node:v20.11.1
- npm:
- OS:iOS 17.2
- Browser:
复现步骤
1.在页面中test.tsx中使用useRequest
const Test = ()=>{
const requestNewVersion = useRequest(getNewVersion, {
manual: true,
onSuccess: data => {
console.log('data=', data);
},
onError: error => {
console.log('error=', error);
},
}).run;
console.log("test")
return (test)
}
2.应用切换到后台，在切换到前台，可以看到多次打印test。去掉useRequest，应用切换到后台，在切换到前台，无test打印。
3.当页面复杂时，卡顿明显。
你期望的现象？
不刷新页面，不卡顿
现有的现象？
卡顿
复现 repo(最好可以提供一个复现的 repo)
经过排查，在useRequest中，强制使用了usePollingPlugin插件；而在usePollingPlugin中，当pollingInterval为undefined时，默认添加了页面显示和隐藏的监听，且此监听无法销毁，并且还会触发组件的重新渲染，导致前后台切换卡顿，确越来越卡。期望当pollingInterval为undefined时，无需监听页面显示和隐藏。
以下为定位到问题的库中部分原代码
var usePollingPlugin = function usePollingPlugin(fetchInstance, _ref) {
var pollingInterval = _ref.pollingInterval,
_ref$pollingWhenHidde = _ref.pollingWhenHidden,
pollingWhenHidden = _ref$pollingWhenHidde === void 0 ? true : _ref$pollingWhenHidde;
var timerRef = useRef();
var unsubscribeRef = useRef();
var documentVisible = useVisible();
var unsubscribeReVisible = subscribeReVisible(function () {
if (!pollingWhenHidden && !escapeState(documentVisible)) {
fetchInstance.refresh();
}
});
var stopPolling = function stopPolling() {
if (timerRef.current) {
clearTimeout(timerRef.current);
}
unsubscribeRef.current == null ? void 0 : unsubscribeRef.current();
};
useUpdateEffect(function () {
if (!pollingInterval) {
stopPolling();
}
}, [pollingInterval]);
if (!pollingInterval) {
return {};
}
return {
....
}