Firebase firestore 读取操作非常高

Question

所以基本上我正在为后端使用 React 和 firebase firestore 制作一个 CRUD 应用程序。我的写入和删除操作都很好，没有问题。

但是我的读取操作有问题

我的网站正在使用 useEffect 从 firebase 中的集合中获取所有文档。所以这只有运行每当它第一次挂载时（当我的网络第一次加载时）以及当我在执行删除和创建操作时更改“用户”值时

这是我的代码：

useEffect(() => {
    const getUsers = async () => {
      const querySnapshot = await getDocs(collection(db, "cobadata"));
      setUsers(querySnapshot.docs.map((doc)=> ({...doc.data(), id: doc.id})))
    };
    getUsers();
  }, [users]);

idk 怎么了，但是当我测试网络时，我得到了一个非常高的读取操作，就像我在我的网站上做的每一个读取操作一样，它在 firebase 中得到了一百个操作。我可以在我的 firebase 控制台中看到这一点，当我在我的 firebase 控制台中使用网络时就像 5 分钟一样，读取操作达到 20k< 操作。

谁能帮我解决这个问题，谢谢！

Answer 1

你没有在这里展示你所有的代码，所以我需要做一些猜测。

您的 useEffect 有一个依赖项数组，现在设置为 [users]。这意味着每次变量 users 更改时，您的 useEffect 都会重新渲染。然后在 useEffect 中通过 setUsers 函数将新值设置为 users。即使您从 firebase 获得与当前用户相同的返回值，您仍然会在每次读取数据时创建一个新数组。 (querySnapshot.docs.map((doc)=> ({...doc.data(), id: doc.id})))。 React 仅进行浅比较，这意味着对象引用已更改，因此 users 在每次渲染时都不同。

首先，您需要决定何时运行 useEffect 以及什么应该触发它。如果变量 users 中的更改不是要检查的正确位置，那么我将从依赖项数组中删除 users。

一种解决方案是将效果中的功能移动到它自己的函数中，并将其包装在 useCallbac 中。然后，您可以在初始加载时从“useEffect”调用此函数，然后在删除或创建用户时只需加载效果即可。像这样。

const getUsers = useCallback(async () => {
        const querySnapshot = await getDocs(collection(db, "cobadata"));
        setUsers(querySnapshot.docs.map((doc)=> ({...doc.data(), id: doc.id}))) 
    }, [collection])
    
    useEffect(() => {
        getUsers()
    }, [getUsers]);

    const createUser = () => {
        ...
        getUsers()
    }

    const deleteUser = () => {
        ...
        getUsers()
    }

(PS！我建议将 eslint-plugin-react-hooks 添加到你的 eslint-config 中。如果你的钩子使用错误，这会给你一些警告)

Firebase firestore 读取操作非常高

Firebase firestore read operation very high

firebase

reactjs

google-cloud-firestore

use-effect