React hooks，为什么DB值变化时会自动重新渲染？答案

【问题标题】：React hooks, Why is it automatically re rendered when the DB value changes?React hooks，为什么DB值变化时会自动重新渲染？
【发布时间】：2021-04-21 02:20:50
【问题描述】：

首先，我使用 Firebase 来构建我的数据库。

我像这样通过 useState 保存了我的 db 值。

const getFromFirestore = useCallback(() => {
    console.log("GET From Firestore");
    webtoonSites.forEach((siteName) => {
      days.forEach(async (day) => {
        await dbService
          .collection(userObj.uid)
          .doc(siteName)
          .collection(day)
          .onSnapshot((snapShot) => {
            const webtoonArr = snapShot.docs.map((doc) => doc.data());
            setMyWebtoons((prev) => {
              return {
                ...prev,
                [siteName]: {
                  ...prev[siteName],
                  [day]: webtoonArr,
                },
              };
            });
          });
      });
    });
    setDataInit(true);
  }, [myWebtoons, userObj]);

然后，我通过 Firebase 更改了 DB 值，因为有一些东西要删除。

if (ok) {
        console.log("delete");
      await dbService
        .collection(userObj.uid)
        .doc(siteName)
        .collection(targetWebtoonObj.day)
        .doc(targetWebtoonObj.title)
        .delete();
    }

我以为 React 不会识别 DB 值已更改，但它识别了它并进行了自动重新渲染过程。

所以我使用 console.log() 检查了函数“getFromFirestore”的执行情况，该函数从 db 设置状态值，但它甚至没有被执行。

React 钩子何时以及如何识别 db-changed 并更改状态值...？

【问题讨论】：

标签： reactjs firebase google-cloud-firestore react-hooks use-state

【解决方案1】：

根据listening for changes 上的 Firestore 文档（强调我的）：

您可以使用onSnapshot() 方法收听文档。使用您提供的回调的初始调用会立即使用单个文档的当前内容创建文档快照。 然后，每次内容更改时，另一个调用会更新文档快照。

因此，每次数据更改时，您的onSnapshot 回调都会再次调用。由于您再次处理那里的数据，并再次调用setMyWebtoons，更新的数据会自动重新呈现。很酷，对吧？ :)

【讨论】：

天啊...太好了！！谢谢你的反馈:)