React useEffect有条件运行

Question

如何防止React组件在每次渲染时获取图像，并从存储中获取图像？我不想通过一次又一次地执行API调用来限制速率，但useEffect的问题在于，它似乎不知道正在设置的变量"；外部"；效果。它似乎完全忽略了!images.length，当我记录images.length的值时，它总是0：(

图像.tsx

const dispatch = useDispatch();
const images = useSelector(selectedImages);
useEffect(() => {
if (!images.length) {
dispatch(fetchImages());
}
}, []);

Answer 1

它总是记录0，因为你没有在useEffect的依赖数组中放入任何东西，所以每当React重新渲染你的组件时，它都会查看useEffect内部，而在dep数组中什么都看不到，所以它只会跳过运行useEffect。

使用useEffect时，应在useEffect中使用的useEffect数组中声明依赖项

const dispatch = useDispatch();
const images = useSelector(selectedImages);
useEffect(() => {
if (!images.length) {
dispatch(fetchImages());
}
}, [images]); // Our deps

所以，让我们说：

1. 首先，默认情况下，它将运行useEffect并执行该效果内的所有逻辑。如果图像数组为空，则调用API获取图像
2. 第二，images数组不再为空，第二个images与第一个为空的images数组不同，所以它仍然运行到useEffect。但它不会再获取图像了，因为那里有if condition

Answer 2

使用React钩子useMemo，您只会在需要时调用API

https://www.robinwieruch.de/react-usememo-hook

https://reactjs.org/docs/hooks-reference.html#usememo