火源UseEffect

Question

因此，这里有一些代码，它应该在防火墙服务器更新时自动运行：

//Whenever the firebase database changes, it runs this method
    useEffect(() => {
        db.collection("posts").orderBy("timestamp", "desc").onSnapshot((snapshot) =>
            //Loops through all the posts and adds the data into an array
          setPosts(snapshot.docs.map((doc) => doc.data()))
        );
      }, []);

但是它怎么知道数据库更新了呢？我认为useEffect只在屏幕呈现时运行，那么当数据库被更新时，它怎么知道如何运行呢？

Answer 1

这在概念上类似于事件处理程序的工作方式。

想想这个:-

  useEffect(() => {
        window.addEventListener('scroll',handleScroll);
      }, []);

在上面的代码中，处理程序只注册一次，因为[]依赖数组使效果只运行一次post优先呈现。但是对于每个滚动，handleScroll将触发，因为它是注册的。

类似地，在您的示例中，onSnapshot是为您注册的事件侦听器，但是如果您要在此onSnapshot回调中记录react状态，您将看到由于关闭而导致的陈旧状态(您最初设置的状态可能是空数组)。在这里，您只需从onSnapshot回调的第一个参数(即snapshot )中获取最新的内容，并将其设置为您的状态，所以一切正常。