我有一个useEffect
,我想避免第一轮.所以我做了一个钩子来判断它是否是第一个渲染:
使用FirstRender
import { useRef, useEffect } from 'react';
export function 使用FirstRender() {
const firstRender = useRef(true);
useEffect(() => {
firstRender.current = false;
}, []);
return firstRender.current;
}
我想像那样使用它
const firstRender = 使用FirstRender();
const [isOpen, setOpen] = useState<boolean>(false);
useEffect(() => {
if (firstRender) {
return;
}
/* Rest of logic using `isOpen` dependency */
}, [isOpen, firstRender]);
Choice 1: With firstRender
as useEffect's dependency
当firstRender
变为False时,此依赖项将重新呈现useEffect,因此将使其毫无用处.
Choice 2: Without firstRender
as useEffect's dependency
这将使逻辑工作正常,但构建它将导致警告:
警告:Reaction Hook useEffect缺少依赖项:‘FirstRender’.包括它或删除依赖项array.react 钩子/穷举式警戒.
最好的解决方案是什么?!
- 我是否有只使用逻辑和开发的解决方案?
- 我知道我可以添加 comments
// eslint-disable-line
来禁用它.但这样做正常吗?我觉得不得不这样做是很奇怪的,而这是意料之中的行为.或者,我是否可以定义要禁用的字段(并保留原始行为)
我错过了什么吗?!为什么埃斯林特规则会阻止你go 做一些有用的事情?我知道我不想要这种依赖!?