通常,当 useEffect 的依赖项发生更改时,它会重新运行。但是,当 useEffect 声明的依赖项自身依赖于 useEffect 所操作的状态时,会发生循环。这可能会导致性能问题和意外的行为。为了解决这个问题,我们可以使用 useRef 钩子来保存组件的状态,并在 useEffect 中检查它是否有任何更改。
代码示例:
import { useState, useEffect, useRef } from 'react';
function App() {
const [count, setCount] = useState(0);
const isMounted = useRef(false);
useEffect(() => {
if (!isMounted.current) {
isMounted.current = true;
} else {
// do something
}
}, [count]);
return (
{count}
);
}
export default App;
在上面的例子中,我们在 useEffect 中使用了 useRef 钩子来创建一个名为 isMounted 的变量,它被赋予了初始值 false。在 useEffect 中,我们首先检查 isMounted 是否为 false,如果是,则设置其值为 true。这样我们就可以避免在组件首次挂载时运行 useEffect。在接下来的渲染中,只有当 count 更改时,我们才会运行 useEffect 中的代码。
下一篇:避免在设置异常时使用递归