Представьте себе крючок:
export function useMounted() {
const mounted = React.useRef<boolean>(false);
React.useEffect(() => {
mounted.current = true;
return () => {
mounted.current = false;
};
}, []);
return mounted;
}
Я бы хотел использовать этот крючок, чтобы определить, установлен ли компонент по-прежнему или нет. Один из вариантов его использования - асинхронная загрузка изображения и отображение изображения только тогда, когда браузер извлек и кэшировал его. Упрощенная версия такого варианта использования может быть:
function useLazyImage(src: string, triggerCallback: any) {
const mounted = useMounted();
const image = useRef<HTMLImageElement>();
useEffect(() => {
if (!!src) {
image.current = new Image();
image.current.onload = () => {
if (mounted.current)
triggerCallback();
};
image.current.src = src;
return () => {
image.current = undefined;
};
}
return undefined;
}, [src]);
}
Она не включает обработку ошибок и не обрабатывает изменения triggerCallback, но показывает мою проблему. response-hooks / исчерпывающе-deps предупреждает меня об отсутствии mounted
зависимости, хотя это не должно быть на самом деле. Так как mounted
- это Ref, при его использовании я не случайно закрываю устаревшие области видимости, и на самом деле это знает Эслинт. Если я изменю свой код на
function useLazyImage(src: string, triggerCallback: any) {
const mounted = React.useRef<boolean>(false);
React.useEffect(() => {
mounted.current = true;
return () => {
mounted.current = false;
};
}, []);
const image = useRef<HTMLImageElement>();
, Eslint больше не будет предупреждать меня. Является ли это ограничение ESLint, что он не может знать, каков результат моего пользовательского хука, или я делаю это неправильно, и есть скрывающаяся ошибка?