React useEffect 避免第一次执行:使用状态控制
如果你不想让 'useEffect' 在组件挂载时执行,可以通过在 'useEffect' 内部添加一个状态来实现。当这个状态为 'false' 时,不执行 'useEffect' 的代码,当这个状态为 'true' 时,执行 'useEffect' 的代码,并把这个状态设置为 'true',这样下次就不会再执行了。
例如:
function MyComponent() {
const [isFirstRender, setIsFirstRender] = useState(true);
useEffect(() => {
if (!isFirstRender) {
// 这里是你的代码
} else {
setIsFirstRender(false);
}
}, [/* 依赖项 */]);
// 组件的其它代码
}
在上面的代码中,我们通过 'useState' 创建了一个名为 'isFirstRender' 的状态,并将其初始值设置为 'true'。在 'useEffect' 内部,我们首先判断 'isFirstRender' 是否为 'false',如果是,则执行 'useEffect' 内部的代码;否则,将 'isFirstRender' 设置为 'false',以便下次执行 'useEffect' 时能够正常执行。
需要注意的是,这里的依赖项数组应该根据实际情况来填写,可以是空数组、一个有值的数组或者一个动态变化的数组,以确保 'useEffect' 能够正常执行。
原文地址: https://www.cveoy.top/t/topic/lu9E 著作权归作者所有。请勿转载和采集!